css实现六边形（2种实现方式）

突然被人问到：css怎么实现一个六边形？有点懵，今天一起来总结下：

本文提供二种实现思路：

1、将六边形拆分为一个矩形+二个三角形，利用伪元素after和before来实现；

2、利用overflow:hidden + css3中的transform:rotate旋转不同角度来实现；

具体实现代码如下：

<!--第一种方案：矩形+左右两个三角形来实现-->
<div class="one"></div>
<style>
    .one{
        width: 120px;
        height: 208px;
        background-color: aqua;
        position: relative;
        margin: 0 100px;
    }
    .one:before{
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        top: 0;
        left: -60px;
        border-top: 104px solid transparent;
        border-bottom: 104px solid transparent;
        border-right: 60px #0f0 solid;
        border-left:none;
    }
    .one:after{
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        top: 0;
        left: 120px;
        border-top: 104px solid transparent;
        border-bottom: 104px solid transparent;
        border-right: none;
        border-left:60px #0f0 solid;
    }
</style> 

  <!--第二种方案：rotate + overflow:hidden来实现-->
    <div class="first">
        <div class="two">
            <div class="three">
            </div>
        </div>
    </div>
<style>
   .first{
        width: 200px;
        height: 250px;
        overflow: hidden;
        transform: rotate(120deg);
    }
    .two{
        width: 100%;
        height: 100%;
        overflow: hidden;
        transform: rotate(-60deg);
    }
    .three{
        width: 100%;
        height: 100%;
        overflow: hidden;
        transform: rotate(-60deg);
        background: red;
    }
</style>