[分享]css六边形制作

CSS六边形制作是一种非常流行的CSS技术，通过使用CSS代码，我们能够快速简单地制作出六边形的图形。下面来看一下如何实现CSS六边形制作：.hexagon { width: 120px; heigh...

CSS六边形制作是一种非常流行的CSS技术，通过使用CSS代码，我们能够快速简单地制作出六边形的图形。下面来看一下如何实现CSS六边形制作：

.hexagon {
  width: 120px;
  height: 70px;
  position: relative;
  background-color: #f08a5d;
  margin: 35px 0;
}

.hexagon:before {
  content: "";
  position: absolute;
  top: -35px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 35px solid #f08a5d;
}

.hexagon:after {
  content: "";
  position: absolute;
  bottom: -35px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-top: 35px solid #f08a5d;
} 

上面的代码就是实现CSS六边形制作的关键代码，让我们来逐一解读一下各个部分。

首先，我们定义了一个class为.hexagon的样式，里面包括了如下属性：

• width - 定义了六边形的宽度
• height - 定义了六边形的高度
• position - 定义了该元素的定位方式
• background-color - 定义了该元素的背景色
• margin - 定义了该元素的外边距

接下来，我们通过:before和:after伪类来实现六边形的边角部分，具体包括了以下属性：

• content - 定义该伪元素的内容
• position - 定义该伪元素的定位方式
• top 和 bottom（或left 和 right）- 定义该伪元素的位置
• width 和 height - 定义该伪元素的宽度和高度
• border-left、border-right、border-top、border-bottom - 定义该伪元素的边框样式
• solid - 定义该边框为实线
• transparent - 定义该边框为透明

最后，我们将:before元素放置在顶部，:after元素放置在底部，就可以形成一个完整的六边形。

通过以上的代码实现，我们可以轻松地创建出不同大小和颜色的六边形，从而满足不同场合的需求。