Как сделать восьмиугольный div?

Question

Довольно простая идея, но я не уверен, как это сделать. Я бы хотел, чтобы стиль был как один div (если возможно).

Как создать восьмиугольник div?

Answer 1

CSS-используется в this link заключается в следующем:

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

Он построен из самого сНу элемента, который задается прямоугольную форму. Используя псевдоклассы :before и :after, содержимое добавляется для создания двух трапеций, которые заполняют восьмиугольник. Умело это держит фактический счетчик тегов только одним, используя более сложные бит CSS.

Происхождение этой техники можно найти here.

---

Here is a quick demo. Синяя часть - это :before CSS, а зеленый - :after CSS. И еще лучше, here is a demo, что позволяет использовать прозрачные фоны! (спасибо @GGG).

Answer 2

Как насчет того, чтобы просто сделать квадрат, поверните его на 45 градусов, а затем закрепите углы?

.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

Вы также можете achive в octogonal DIV с inline svg использованием polygon element.
Вот пример:

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>