Se está poniendo de moda el usar formas geométricas en las maquetaciones así que ¿cómo podemos crear un hexágono para nuestra web? ¿o un octógono? En el último año de hecho los hexágonos han estado bastante de moda (parece un chiste, pero no, pensad en múltiples diseños que habéis visto)

Entonces ¿cómo creo un hexágono con CSS? Pues aquí va un ejemplo de código, basándose en un la idea de que, a fin de cuentas, un hexágono se hace con un cuadrado con un triángulo encima y otro debajo:

#hexagono { 
  width: 150px; 
  height: 90px; 
  background: #666; 
  position: relative; 
}

#hexagono:before { 
  content: ""; 
  position: absolute; 
  top: -50px; 
  left: 0; 
  width: 0; 
  height: 0; 
  border-left: 75px solid transparent; 
  border-right: 75px solid transparent; 
  border-bottom: 50px solid #666; 
} 
#hexagono:after { 
  content: ""; 
  position: absolute; 
  bottom: -50px; 
  left: 0; 
  width: 0; 
  height: 0; 
  border-left: 75px solid transparent; 
  border-right: 75px solid transparent; 
  border-top: 50px solid #666;  
}

Ya véis la idea: usando :after y :before metemos dos triángulitos sobre un cuadrado y ya tenemos hexágono.

El octógono ya es más jodón, que tiene más lados, pero tampoco entraña mucha más complejidad. Eso sí, vas a necesitar jugar con más colores, ya que las formas se hacen a base de bordes, como en el ejemplo anterior:

#octogono { 
  width: 150px; 
  height: 150px; 
  background: #999; 
  position: relative; 
} 
#octogono:before { 
  content: ""; 
  position: absolute; 
  top: 0; 
  left: 0; 
  border-bottom: 44px solid #999; 
  border-left: 44px solid #fff;/*Para el ejemplo he elegido blanco, poned vosotros el color de fondo de vuestra web. No uséis transparent porque entonces se verá el color de fondo del cuadrado*/ 
  border-right: 44px solid #fff; 
  width: 63px; height: 0; 
} 

#octogono:after { 
  content: ""; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  border-top: 44px solid #999; 
  border-left: 44px solid #fff; 
  border-right: 44px solid #fff; 
  width: 63px; 
  height: 0; }