正六边形

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