css画正六边形

<div class="hexagon">
	 <div class='one'>1</div>
	 <div class='two'>2</div>
	 <div class='three'>3</div>
</div>

.hexagon{
   	 position:relative;width:88px;
 }
.one {
	 width: 88px;
	 height: 50px;
	 border-left: 1px solid red;
	 border-right: 1px solid red;
}
.two {
	 position: absolute;
	 width: 88px;
	 height: 50px;
	 top: 0;
	 transform: translate(-50%, -50%);
	 transform: rotate(60deg);
	 border-left: 1px solid red;
	 border-right: 1px solid red;
}
.three {
	 position: absolute;
	 width: 88px;
	 height: 50px;
	 top: 0;
	 transform: translate(-50%, -50%);
	 transform: rotate(300deg);
	 border-left: 1px solid red;
	 border-right: 1px solid red;
}

 .hexagon{
    position:relative;width:88px;
    .one {
      width: 50px;
      height: 88px;
      border-top: 1px solid red;
      border-bottom: 1px solid red;
    }
    .two {
      position: absolute;
      width: 50px;
      height: 88px;
      border-top: 1px solid red;
      border-bottom: 1px solid red;
      top: 0;
      transform: translate(-50%, -50%);
      transform: rotate(60deg);
    }
    .three {
      position: absolute;
      width: 50px;
      height: 88px;
      border-top: 1px solid red;
      border-bottom: 1px solid red;
      top: 0;
      transform: translate(-50%, -50%);
      transform: rotate(300deg);
    }
  }

参考链接https://blog.csdn.net/qq_42606051/article/details/80949741###