En el anterior artículo sobre la propiedad border-radius de CSS3, vimos cómo era posible dibujar formas simples geométricas, en ese caso concreto círculos y elipses. Hoy veremos cómo dibujar triángulos, aunque no será tan sencillo, pues no hay una propiedad concreta en CSS que nos permita hacerlo directamente.

Hay varias fórmulas para conseguir dibujar un triángulo con CSS, aunque yo prefiero, y de hecho uso, la técnica de dibujo mediante la propiedad border. Es cierto que no se pueden usar sombreados, degradados u otras técnicas de CSS3 (ya que es un borde), pero por contra se ve igual en todos los navegadores (salvo algún problemilla en Firefox) y fácilmente podemos darle el color y tamaño que deseemos.

Esta técnica creada por el desarrollador de MooTools, Darren Waddell, consiste en aprovechar el conflicto que se produce al dar dos colores diferentes a dos bordes adyacentes, produciéndose una unión sesgada, que siendo ambos bordes del mismo ancho da lugar a un ángulo de 45 grados.

#ejemplo2-1 {
  border-top:10px solid red;
  border-right:10px solid green;
  border-bottom:10px solid blue;
  border-left:10px solid orange;
  height:80px;
  width:80px;
}

Si ahora ponemos a cero el ancho y largo del contenedor y además aumentamos el ancho de los bordes, vemos como se forman cuatro triángulos.

#ejemplo2-2 {
  border-top:50px solid red;
  border-right:50px solid green;
  border-bottom:50px solid blue;
  border-left:50px solid orange;
  height:0;
  width:0;
}

Ahora lo único de debemos hacer es eliminar tres de los bordes que forman los triángulos que no deseamos para conseguir el que queremos. ¿Y cómo?. Es tan sencillo como darle el valor transparent al color de los adyacentes al que queremos y no darle ningún valor al que sobra (con no definirlo basta).

#ejemplo2-3 {
  border-top:50px solid #ccc;
  border-right:50px solid transparent;
  border-left:50px solid transparent;
  height:0;
  width:0;
}

#ejemplo2-4 {
  border-top:50px solid transparent;
  border-right:50px solid #ccc;
  border-bottom:50px solid transparent;
  height:0;
  width:0;
}

#ejemplo2-5 {
  border-right:50px solid transparent;
  border-bottom:50px solid #ccc;
  border-left:50px solid transparent;
  height:0;
  width:0;
}

#ejemplo2-6 {
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
  border-left:50px solid #ccc;
  height:0;
  width:0;
}

Podemos sacar un poco de provecho a esta técnica, y con un poco de imaginación bien podríamos hacer triángulos en otras orientaciones, dando el mismo color a dos bordes contiguos y el valor transparent a los otros dos:

#ejemplo2-7 {
  border-top:50px solid #ccc;
  border-right:50px solid #ccc;
  border-bottom:50px solid transparent;
  border-left:50px solid transparent;
  height:0;
  width:0;
}

#ejemplo2-8 {
  border-top:50px solid transparent;
  border-right:50px solid #ccc;
  border-bottom:50px solid #ccc;
  border-left:50px solid transparent;
  height:0;
  width:0;
}

#ejemplo2-9 {
  border-top:50px solid transparent;
  border-right:50px solid transparent;
  border-bottom:50px solid #ccc;
  border-left:50px solid #ccc;
  height:0;
  width:0;
}

#ejemplo2-10 {
  border-top:50px solid #ccc;
  border-right:50px solid transparent;
  border-bottom:50px solid transparent;
  border-left:50px solid #ccc;
  height:0;
  width:0;
}

Como ves es una técnica bastante sencilla de usar y que nos ayuda a dibujar triángulos sin necesidad alguna de usar imágenes, siendo mucho más sencillo su modificación posterior y disminuyendo el peso de nuestra web. Su uso en diseño ya es cuestión de imaginación, aunque a modo de ejemplo, en DallyCoding, encontrarás una elegante forma para cambiar los comentarios de tu web/blog.