css画正六边形

最新推荐文章于 2025-02-15 20:52:55 发布

原创最新推荐文章于 2025-02-15 20:52:55 发布 · 429 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

4 篇文章

订阅专栏

在这里插入图片描述

<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);
    }
  }