No hace mucho que vimos las posibilidades que CSS nos brinda para dibujar, en el artículo cómo dibujar triángulos con CSS, dimos prueba de ello. Dibujar con CSS nos abre un amplio abanico de posibilidades a la hora de diseñar una web y además de forma muy liviana, pues nunca está demás optimizar todos nuestros proyectos.

Hoy vamos a dibujar hexágonos. El porqué es muy sencillo, están de moda. Sí, han sido una de las tendencias en cuanto a diseño en todo este 2015, y además son relativamente sencillos de dibujar. Así que desempolva tus viejos libros de trigonometría (que los vas a necesitar), y al lío.

La primera forma de dibujar un hexágono es muy sencilla si sabes dibujar triángulos. El método que voy a usar es el de los bordes, así que si se te ha olvidado pégale un repaso a este post. Sólo vamos a necesitar tres figuras: un triángulo hacia arriba, otro hacia abajo y un rectángulo. Sencillo, pero que muy sencillo:

#triangulo-superior {
  border-right: 3.4641em solid transparent;
  border-bottom: 2em solid #ccc;
  border-left: 3.4641em solid transparent;
  height: 0;
  width:  0;
}
#rectangulo {
  height: 4em;
  width: 6.9282em;
}
#triangulo-inferior {
  border-top: 2em solid #ccc;
  border-right: 3.4641em solid transparent;
  border-left: 3.4641em solid transparent;
  height: 0;
  width: 0;
}

Ahora sólo nos queda unirlos para formar el hexágono. Voy a hacerlo usando los pseudo-elementos before y after, así nos ahorraremos unos cuantos div en nuestro HTML:

#hexagono {
  height: 4em;
  margin: 3.4641em 0;
  position: relative;
  width: 6.9282em;
}
#hexagono:before {
  border-right:3.4641em solid transparent;
  border-bottom:2em solid #ccc;
  border-left:3.4641em solid transparent;
  content: '';
  height:0;
  left: 0;
  position: absolute;
  right; 0;
  top: -2em;
  width: 0;
}
#hexagono:after {
  border-top:2em solid #ccc;
  border-right:3.4641em solid transparent;
  border-left:3.4641em solid transparent;
  bottom:-2em;
  content: '';
  height:0;
  left: 0;
  position: absolute;
  right; 0;
  width:0;
}

¿Te has acordado del libro de trigonometría?. Sino es así ve por él, pues vamos a necesitarlo.

Para esta segunda forma de dibujar un hexágono vamos a servirnos de las propiedades trigonométricas que posee un hexágono regular (de ahí la coña con el librito). Con dos de ellas será suficiente: el ángulo interior que forman sus lados (de 60 grados) y la relación entre su altura y uno de sus lados. Para un lado de longitud 1 la altura del hexágono es igual a la raíz de 3. Para este ejemplo no sabremos la longitud de sus lados, pero si la altura del hexágono (distancia entre dos lados opuestos), así que sus lados seguirá una proporción igual a 1/√3, o lo que es lo mismo a 0.57735.

Su construcción es muy sencilla. Vamos a usar tres rectángulos que se entrelazan, dos de ellos a 60 y -60 grados con respecto a uno principal, y cuya construcción tendrá una proporción igual a 0.57735. Como en el ejemplo anterior usaré los pseudo-elementos before y after, y además la propiedad rotate de la etiqueta transform para girar los rectángulos:

#hexagono2{
  height: 5.7735em;
  position: relative;
  width: 10em;
}
#hexagono2:before {
  background: inherit;
  content: '';
  height: 100%;
  position: absolute;
  transform: rotate(-60deg);
  transform-origin: 50% 50%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left:0;
}
#hexagono2:after {
  background: inherit;
  content: '';
  height: 100%;
  position: absolute;
  transform: rotate(60deg);
  transform-origin: 50% 50%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left:0;
}

Para el final me he dejado el método más original, y el mejor para determinadas situaciones, una pena que no se me haya ocurrido a mí, y es que ver lo evidente no es tan sencillo. La primera vez que vi esta forma de construir un hexágono fue en el blog de Kseso en su artículo Menú Css en hexágono con zona activa del enlace sin sobrepasar su perímetro, aunque la idea tampoco es suya. La idea original es de dmac37 y su método es, aunque suene redundante, tremendamente original.

Su construcción es muy similar a la del ejemplo anterior, de hecho vamos a cruzar tres div de la misma forma (y con la misma relacción entre ángulos). Eso sí, no es necesario respetar la proporción de 0.57753 para formar los div, aunque si queremos que el hexágono sea regular, al menos han de ser los tres iguales.

La gran diferencia es que el hexágono que obtenemos no es de juntar esas tres piezas, sino de la figura que se forma cuando estas se cruzan, que concretamente es un hexágono. El resto es sólo quitar el sobrante:

<div id="hexagono3" class="color-example">
  <div id="hexagono3-1" class="color-example">
    <div id="hexagono3-2" class="color-example"></div>
  </div>
</div>

#hexagono3 {
  height: 20em;
  margin: -3em 0;
  overflow: hidden;
  transform: rotate(120deg);
  visibility: hidden;
  width: 10em;
}
#hexagono3-1 {
  height: 100%;
  overflow: hidden;
  transform: rotate(-60deg);
  width: 100%;
}
#hexagono3-2 {
  height: 100%;
  transform: rotate(-60deg); 
  visibility: visible ;
  width: 100%;
}

Ahora que ya sabes como construir hexágonos, y nada menos que de tres formas diferentes, sólo queda decidirse por una, y aquí es donde vienen las diferencias. Tanto el primer como el segundo método el principal problema es que la región de trabajo no es completa. En el primer caso tenemos una región para insertar contenido, la correspondiente al rectángulo (los triángulos no son usables pues son bordes). Para el segundo caso, tenemos por contra tres regiones, y dos de ellas en ángulo con respecto a la primera, aunque esto puede dar algo de juego.

El último caso lo bueno que tiene es que el hexágono conforma toda la región de trabajo, pues sólo usamos la parte que resta de eliminar el sobrante del tercer rectángulo, lo cual es ideal por ejemplo, para poner una imagen de fondo, con lo que conseguiríamos una imagen hexagonal. Cual usar y cómo es sólo cuestión de usabilidad e imaginación.