正六边形
程序员文章站
2022-05-22 14:12:15
...
原文地址: http://blog.csdn.net/wx11408115/article/details/74275883
昨天在一个技术群中看到一个这样的图片,觉得挺好看的,今天自己试试
实现六边形方法有4
1. 三个长方形旋转( 60°,120°)
2. 一个长方形+ 两个三角形(距离不好计算)
3. svg
4. canvas
本文只实现了前两种,
方法一:
html
<div class="part1 sexangle">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
css
.part1.sexangle {
width: 100px;
height: 100px;
margin: 100px auto;
}
.one, .two, .three {
width: 100px;
height: 57px;
position: absolute;
background-color: red;
}
.one {transform: rotate(60deg); }
.two {transform: rotate(120deg); }
注意: 用绝对定位, 这是四种中最易实现
方法二
html
<div class="part2">
<div class="before"></div>
<div class="part2-sex"></div>
<div class="after"></div>
</div>
css
.part2 {
margin: 100px auto;
width: 160px;
height: 20px;
}
.part2 .part2-sex {
width: 173.2px;
height: 100px;
background-color: red;
}
.part2 .before {
width: 0;
height: 0;
border-bottom: 50px solid red;
border-right: 86.6px solid transparent;
border-left: 86.6px solid transparent;
}
.part2 .after {
width: 0;
height: 0;
border-top: 50px solid red;
border-right: 86.6px solid transparent;
border-left: 86.6px solid transparent;
}
方法二: 不好计算尺寸
最后画个之前看到的图
打包代码 http://download.csdn.net/detail/wx11408115/9887720
原文地址: http://blog.csdn.net/wx11408115/article/details/74275883