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

Question

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

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

Answer 1

CSS, используемый в этой ссылке , таков:

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

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

Истоки этой техники можно найти здесь .

---

Вот быстрое демо .Синяя часть - это :before CSS, а зеленая - :after CSS.И даже лучше, вот демо , которое позволяет прозрачный фон!(спасибо @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

Вы также можете получить восьмеричное деление с помощью встроенного svg , используя многоугольный элемент .
Вот пример:

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>