- 使用单个div实现一个六边形，首先使用div设置合适的height和width显示出一个中间的长方形，然后左右需要两个三角形即可实现一个六边形，在这个div正方形左右两边添加样式的方法.box:before和.box:after,定位左边三角形
position:absolute;top:0; left:-60px
分别设置中间的长方形和左右的三角形（transparent是css用于绘制三角形的，border-top/bottom中添加，然后设置border-left就会形成一个向左的三角形，右边同理）
（利用简单的几何学分别设置计算距离上下 ，左或者右的距离并使用border-top/bottom/right/left）,形成一个六边形
div{
display: block;
}
.box{
width: 0;
height: 0;
width: 120px;
height: 208px;
background-color: aqua;
margin: 100px auto;
position: relative;
}
.box: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;
}
.box: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;
}
