很简单的想法,但我不知道该怎么做.我希望能够将它设计成一个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).
原文地址:https://www.jb51.cc/html/225448.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。