html – 如何制作一个octogonal div？

#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的funkier位将实际标签数量保持为一.

该技术的起源可以在here找到.

Here is a quick demo.蓝色部分是：在CSS之前,绿色是：在CSS之后.甚至更好,here is a demo允许透明背景！ (谢谢你@GGG).