使用css将单个div设计成一个六边形

• 使用单个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;
            }

使用css实现六边形