如何制作一个octogonal 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的funkier位将实际标签数量保持为一.

这种技术的起源可以在这里找到.

这是一个快速演示.蓝色部分是:beforeCSS,绿色是:afterCSS.更好的是,这是一个允许透明背景的演示!(谢谢你@GGG).