如何制作一个八角形的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元素本身构造的，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获得一个八角形div
这里有一个例子：

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>