[分享]css3拼凑的五边形

CSS3是一个功能强大的样式表语言，它能够实现各种各样的样式效果，而五边形的制作也是它的一项强大功能。

.pentagon {
  width: 0;
  height: 0;
  border-bottom: 100px solid #007bff;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  position: relative;
  margin: 50px auto;
} 
.pentagon:before, .pentagon:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 50px solid #007bff;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  top: -50px;
}
.pentagon:before {
  left: -30px;
}
.pentagon:after {
  right: -30px;
} 

在上述代码中，我们使用了CSS3的border属性来制作五边形的边框，通过设置不同的边框宽度和颜色，我们可以实现各种各样的效果，这里我们以蓝色为例。

同时，我们还利用了伪元素:before和:after来制作五边形的顶部角，通过改变它们的大小和位置，我们可以实现较为精细的五边形效果。

最后，我们将所有的元素整合在一起，并设置它们的宽度和距离来实现整体效果。