css实现六边形

最近在写一个蜂窝式布局,所以研究了一下六边形的实现原理
实现六边形的俩种方式:
方式一： 一个长方形+两个三角形
首先我们要先了解一下border

每个border之间是成45度,利用这点我们可以做出来三角形

<div class="triangle"></div>
/*css片段*/
.triangle{
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-left: 86px solid transparent;
    border-right: 86px solid transparent;
}

上