本文摘自PHP中文网,作者藏色散人,侵删。
css画出六边形的方法:1、把正六边形分成三部分,然后将div及伪元素的宽高计算出来并设置;2、把正六边形分成三个宽高相同的div,然后使用定位以及css3 transform:rotate分别向左右旋转60deg形成正六边形即可。
![](http://ypimg.muzhuangnet.com/Collect/csharp/upload/article/202101/18/2021011810262738188.jpg)
本教程操作环境:windows7系统、css3版本、Dell G3电脑。
推荐:css视频教程
首先了解一下正六边形内角和边的关系,正六边形的每个内角是60deg,如图(√3其实是根号3):
![1610936868668818.png a7249e17b18fdf0c3b582e31b4a9060.png](http://ypimg.muzhuangnet.com/Collect/csharp/upload/image/220/502/949/1610936868668818.png)
方法一:原理把正六边形分成三部分,左中右分别是:before部分,div部分,after部分,如图:
![1610936865691303.png 5a30787706b72b0079b7dc07a9cb072.png](http://ypimg.muzhuangnet.com/Collect/csharp/upload/image/121/642/323/1610936865691303.png)
before三角形部分是div的before伪元素,after三角形部分是div的after伪元素。
html代码:
css代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | .div {
position: relative;
width: 50px;
height: 86.6px;
margin: 50px auto;
background-color: red;
}
.div:before {
content: '' ;
display: block;
position: absolute;
width: 0;
height: 0;
right:50px;
border-width: 43.3px 25px;
border-style: solid;
border-color: transparent red transparent transparent;
}
.div:after {
content: '' ;
display: block;
position: absolute;
width: 0;
height: 0;
left:50px;
border-width: 43.3px 25px;
border-style: solid;
border-color: transparent transparent transparent red;
top:0;
}
|
注意div及伪元素的宽高需要根据上面的公式计算。
阅读剩余部分
相关阅读 >>
css怎么把正方形变成圆形
css超出显示滚动条的方法有哪些
如何使用css让背景图片不重复
css垂直居中的方法有哪些
css绘制扇形进度条
css如何实现背景透明,文字不透明?
css的语法规则是什么
怎么用css设置字体颜色
如何解决myeclipse 8.5 css乱码问题
css中词语间隔怎么设置
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css六边形怎么画