{ . . . }
Snippets

Triangulos con CSS

Sin Comentarios

Cada día el uso de imágenes como parte de los diseños en el mundo web desaparecen, y esto gracias a las diferentes técnicas ideadas con los diferentes lenguajes para que solventar este problema, simplificar, reducir pesos y reducir las llamadas de archivos al servidor ha sido la obsesión de muchos frontends. Css en su constante evolución nos ha ayudado en la creación de gráficos, formas y hasta efectos degradados  con el fin de que podamos adaptar nuestros diseños a la era móvil, donde se exige simplicidad, legibilidad y flexibilidad.

Que vamos a hacer?

Vamos a crear triángulos en todas las direcciones y esto utilizando un div para cada triangulo y en css la propiedad border, aunque advierto que el utilizar los pseudo elementos :after y :before siguen siendo una de las mejores formas de generar gráficos en CSS ya que no influye mucho en la semántica del sitio.

Vamos a crear los div que emplearemos para crear los diferentes triángulos.

<div class="triangulo triangulo-izquierda"></div>
<div class="triangulo triangulo-arriba"></div>
<div class="triangulo triangulo-abajo"></div>
<div class="triangulo triangulo-derecha"></div>

La técnica es simple, debemos de jugar con los cuatro extremos de la caja y con la opacidad de los mismo para lograr el efecto de forma diagonal en los lados del div.

triangulos-con-css

vamos con el CSS.

.triangulo {
  display: inline-block;
  margin: 0 10px;
  vertical-align: middle;
}
.triangulo-izquierda {
  border-right: solid 3em rgb(134, 163, 216);
  border-top: solid 3em transparent;
  border-bottom: solid 3em transparent;
}
.triangulo-derecha {
  border-left: solid 3em rgb(134, 163, 216);
  border-bottom: solid 3em transparent;
  border-top: solid 3em transparent;
}
.triangulo-arriba {
  border-bottom: solid 3em rgb(134, 163, 216);
  border-left: solid 3em transparent;
  border-right: solid 3em transparent;
}
.triangulo-abajo {
  border-top: solid 3em rgb(134, 163, 216);
  border-left: solid 3em transparent;
  border-right: solid 3em transparent;
}

Lo que generará las siguientes formas:

See the Pen Triangulos con CSS – Bordes by frontend (@tutosytips) on CodePen
1

y esta es solo una forma de generar este tipo de gráficos con solo CSS,  gráficos que vamos a editar, escalar fácilmente.  No es tan difícil cierto!

Comentar

avatar