css常见问题：如何画多边形「三角形~六边形」

一、前言

在前端开发中，常常需要用到各种多边形，特别是三角形。这篇文章将介绍如何使用CSS画多边形，包括三角形、四边形、五边形和六边形。这些技巧都是基于CSS的伪元素实现的。

二、如何画三角形

1. 直角三角形

直角三角形是最简单的三角形，它的两条边垂直相交。我们可以使用CSS的:before和:after伪元素来实现。

/* 一个等边直角三角形 */

.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-right: 50px solid transparent;
  position: relative;
}
.triangle:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 50px solid red;
  border-right: 50px solid transparent;
  left: -50px;
  top: 0;
}

上面的代码中，我们使用了:before伪元素来实现三角形的一条边，然后通过border-color: transparent来实现其它两条边。需要注意的是，我们通过给三角形设position: relative来让:before伪元素相对于父元素进行定位。

2. 等边三角形

等边三角形三条边都相等。我们使用:before伪元素来实现一个等边三角形。

/* 等边三角形 */

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid red;
  position: relative;
}
.triangle:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid white;
  left: -50px;
  top: -50px;
}

为了让三角形成为等边三角形，我们需要将三个边的border-width设为相等的长度。然后，我们使用:before伪元素来在三角形的顶点处绘制一个白色的三角形，使得三角形看起来像是只有一个边是红色的。此外，:before伪元素也是相对于父元素进行定位。

三、如何画四边形

四边形就像它的名字一样，有四个边。我们可以使用:before和:after伪元素来实现一个带边框的四边形。

/* 带边框的四边形 */

.quadrilateral {
  position: relative;
  width: 100px;
  height: 80px;
  border: 2px solid red;
}
.quadrilateral:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-right: 50px solid red;
  border-bottom: 30px solid transparent;
  left: -2px;
  top: -2px;
}
.quadrilateral:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-left: 50px solid red;
  border-bottom: 30px solid transparent;
  right: -2px;
  top: -2px;
}

我们先创建了一个有边框的四边形，并将其定位为相对。然后使用伪元素来创建两个三角形，在四边形的两个相对角上，使三角形相交，形成一个四边形。需要注意的是，在创建:before伪元素时，我们使用了相对定位来让伪元素位于正方形的左上角，使用了负的border-width来让它重叠在正方形上部和下部，从而创建出其顶点；创建:after伪元素同理，只不过偏移量和方向不同。

四、如何画五边形

使用:before和:after伪元素，我们可以再次尝试创建一个多边形。这一次，我们将实现一个五边形。

/* 五边形 */

.pentagon {
  position: relative;
  width: 100px;
  height: 100px;
  background: red;
}
.pentagon:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 47px solid red;
  border-bottom: 50px solid transparent;
  left: 0;
  top: 0;
}
.pentagon:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 47px solid red;
  border-bottom: 50px solid transparent;
  right: 0;
  top: 0;
}

上面的代码和前面的代码差不多。我们先创建了一个正方形，并用红色填充；接着，我们在正方形的两个相对角上创建了两个三角形，从而形成了一个五边形。

五、如何画六边形

要画一个六边形，我们需要在正方形的四个角上创建四个三角形。

/* 六边形 */

.hexagon {
  position: relative;
  width: 100px;
  height: 100px;
  background: red;
}
.hexagon:before, .hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 25px solid red;
  border-bottom: 50px solid transparent;
}
.hexagon:before {
  left: -25px;
  top: 0;
}
.hexagon:after {
  right: -25px;
  top: 0;
}
.hexagon:before:before, .hexagon:before:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-right: 50px solid red;
  border-bottom: 25px solid transparent;
  left: 0;
  top: -25px;
}
.hexagon:after:before, .hexagon:after:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-left: 50px solid red;
  border-bottom: 25px solid transparent;
  right: 0;
  top: -25px;
}

六边形是一种特殊的多边形，我们需要在正方形的四个角上创建四个三角形，从而形成六边形。上面的代码创建了一个六边形，我们可以看到，我们使用了四个三角形分别位于正方形的四个角处，每个三角形都是这个三角形中的一部分。在一个三角形中，我们设置了一个border-right来制造出与周围三角形的连接。

六、总结

以上介绍了如何使用CSS绘制各种多边形，包括三角形、四边形、五边形和六边形。这些技巧都是基于CSS的伪元素来实现的。我们可以通过:before和:after伪元素来创建多边形中的各个部分，然后使用CSS的border属性来绘制边框。希望这篇文章能对你有所帮助。