¿Cómo hacer un div octogonal?

Question

Idea bastante simple, pero no estoy seguro de cómo hacer esto. Me gustaría poder darle un estilo como uno div (si es posible).

¿Cómo puedo crear un octagonal div?

Answer 1

El CSS utilizado en this link es la siguiente:

#octagon { 
    width: 100px; 
    height: 100px; 
    background: red; 
    position: relative; 
} 

#octagon:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0;  
    border-bottom: 29px solid red; 
    border-left: 29px solid #eee; 
    border-right: 29px solid #eee; 
     width: 42px; 
    height: 0; 
} 

#octagon:after { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 0;  
    border-top: 29px solid red; 
    border-left: 29px solid #eee; 
    border-right: 29px solid #eee; 
    width: 42px; 
    height: 0; 
} 

Se construye a partir de la propia elemento div que se da una forma rectangular. Con las pseudo clases :before y :after, se agrega contenido para crear dos trapecios que completen el octágono. Inteligentemente, esto mantiene el recuento de etiqueta real en solo uno mediante el uso de los bits más divertidos de CSS.

Los orígenes de esta técnica se pueden encontrar here.

---

Here is a quick demo. La parte azul es el CSS :before y el verde el :after CSS. ¡Y aún mejor, here is a demo que permite fondos transparentes! (gracias @GGG).

Answer 2

¿Qué le parece hacer un cuadrado, rotarlo 45 grados y luego cortar las esquinas?

.octagon { 
    height: 10em; 
    position: relative; 
    overflow: hidden; 
    width: 10em; 
} 

.octagon:after { 
    background: red; 
    content: " "; 
    height: 100%; 
    position: absolute; 
    width: 100%; 


    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
     -ms-transform: rotate(45deg); 
     -o-transform: rotate(45deg); 
      transform: rotate(45deg); 

} 

jsFiddle

Answer 3

También puede achive un div octogonal con inline svg utilizando el polygon element.
Aquí se muestra un ejemplo:

svg{width:30%;}

<svg viewbox="0 0 10 10"> 
 
    <polygon points="3 0, 7 0, 10 3, 10 7, 7 10, 3 10, 0 7, 0 3" /> 
 
</svg>