正六边形

原文地址: 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