当前第2页 返回上一页
方法二:也是把正六边形分成三个宽高相同的div,然后使用定位以及css3 transform:rotate分别向左右旋转60deg形成正六边形,如图:
html代码:
1 2 3 4 5 | <div style= 'position:relative;width:100px;margin:0 auto;' >
<div class = 'one' ></div>
<div class = 'two' ></div>
<div class = 'three' ></div>
</div>
|
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 | .one {
width: 50px;
height: 86.6px;
margin: 0 auto;
border-top: 1px solid red;
border-bottom: 1px solid red;
}
.two {
position: absolute;
width: 50px;
height: 86.6px;
left: 25px;
top: 0;
transform: translate(-50%,-50%);
transform: rotate(60deg);
border-top: 1px solid red;
border-bottom: 1px solid red;
}
.three {
position: absolute;
width: 50px;
height: 86.6px;
left: 25px;
top: 0;
transform: translate(-50%,-50%);
transform: rotate(300deg);
border-top: 1px solid red;
border-bottom: 1px solid red;
}
|
以上就是css六边形怎么画的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
如何利用css改变浏览器滚动条样式
css怎么把div设置成爱心
css中怎么改变超链接颜色
深入浅析css中的数学表达式calc()
css字体保持在一行不换行的实现方法
css怎么设置虚线
css如何实现按钮居中显示
css怎么不选最后一个元素
css body如何实现不出现滚动条
css怎么设置无边框
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css六边形怎么画