Jak zrobić ośmiokątną div?

Question

Całkiem prosty pomysł, ale nie jestem pewien, jak to zrobić. Chciałbym móc go stylizować jako jeden div (jeśli to możliwe).

Jak utworzyć ośmiokątną div?

Answer 1

CSS stosowane w this link to:

#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; 
} 

Jest ona wykonana z samego elementu div któremu nadaje się kształt prostokątny. Przy użyciu pseudo klas, zawartość jest dodawana w celu utworzenia dwóch trapezów, które uzupełniają ośmiokąt. Sprytnie pozwala to na faktyczne liczenie tagów tylko przy użyciu najjaśniejszych bitów CSS.

Początki tej techniki można znaleźć here.

---

Here is a quick demo. Niebieska część to kod CSS :before i zielony kod CSS w wersji :after. A jeszcze lepiej, here is a demo, który pozwala na przezroczyste tła! (dziękuję @GGG).

Answer 2

Co powiesz na zrobienie kwadratu, obrócenie o 45 stopni, a następnie obcięcie rogów?

.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

Można również achive się octogonal div z inline svg pomocą polygon element.
Oto przykład:

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>