如何使用 HTML 和 CSS 绘制五边形？

在HTML和CSS中，绘制基本的形状可以使用伪元素和CSS属性。五边形可以用两个三角形拼接而成。

步骤

步骤1：创建一个div元素

我们首先需要创建一个div元素，它将成为我们五边形的容器。

<div class="pentagon-container"></div>

步骤2：样式设置

我们需要为该容器定义一个固定大小，并且将overflow设置为hidden，以便隐藏伪元素在容器外部的部分。

.pentagon-container {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
}

步骤3：创建伪元素

创建一个伪元素并将其绝对定位于五边形容器的中心。并设置其z-index为-1，使其置于容器底部。

.pentagon-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #ccc;
  transform: rotate(35deg);
  z-index: -1;
}

这将创建一个以容器中心为中心的三角形。

步骤4：创建第二个伪元素

这是将形成五边形的第二个三角形，应该将其旋转35度以便与第一个三角形拼接。

.pentagon-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #ccc;
  transform: rotate(-35deg);
  z-index: -1;
}

步骤5：关闭容器

</div>

步骤6：效果展示

最终代码如下：

<div class="pentagon-container"></div>

.pentagon-container {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
}

.pentagon-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #ccc;
  transform: rotate(35deg);
  z-index: -1;
}

.pentagon-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #ccc;
  transform: rotate(-35deg);
  z-index: -1;
}

预览效果如下：

结论

以上就是利用CSS和HTML绘制五边形的全部步骤，可以通过调整容器的大小和颜色来定制五边形的风格。