很简单的想法,但我不知道该怎么做.我希望能够将它设计成一个div(如果可能的话).
如何创建八角形div？
解决方法
this link中使用的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位将实际标签数量保持为一.
该技术的起源可以在here找到.
Here is a quick demo.蓝色部分是：在CSS之前,绿色是：在CSS之后.甚至更好,here is a demo允许透明背景！ (谢谢你@GGG).
