面试官：CSS如何画一个三角形？原理是什么？

[linwu-hi]

面试官：CSS如何画一个三角形？原理是什么？

在CSS中，我们可以通过一些技巧来绘制简单的形状，包括三角形。绘制三角形的常用方法有两种：利用边框和利用伪元素。

利用边框绘制三角形

绘制三角形最简单的方法是利用元素的边框。我们可以通过设置元素的宽度和高度为0，并设置对应的边框，然后隐藏不需要的边框，从而得到三角形的形状。

.triangle {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

在这个例子中，我们设置了一个triangle类的元素，并且将其宽度和高度都设置为0。接着，通过border-width属性设置边框的宽度为20px，并设置边框的颜色。我们在这里选择了一个红色的边框，你可以根据需求设置不同的颜色。

border-color属性的四个值分别表示四个边框的颜色，它们的顺序是：上、右、下、左。在这里，我们只让上边框显示出来，而其他三个边框设置为透明，从而形成一个三角形。

利用伪元素绘制三角形

除了利用边框，我们还可以利用伪元素来绘制三角形。伪元素可以在元素的内容前或内容后插入内容，利用这个特性，我们可以在元素的::before或::after伪元素中绘制三角形。

.triangle {
  position: relative;
  width: 0;
  height: 0;
}

.triangle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

在这个例子中，我们同样创建了一个triangle类的元素，并将其宽度和高度都设置为0。然后，我们在::before伪元素中插入一个空内容，并将其设置为绝对定位，使得它可以覆盖在triangle元素的上方。

接下来，我们通过设置伪元素的边框属性来绘制三角形，方法与之前的方法相同，只显示上边框，并将其他三个边框设置为透明，形成三角形的形状。

原理

这两种方法的原理都是利用CSS的边框属性来绘制三角形。对于利用边框绘制三角形的方法，我们通过将元素的宽度和高度设置为0，然后利用边框的特性来实现三角形的形状。而对于利用伪元素绘制三角形的方法，我们在元素的::before或::after伪元素中插入一个空内容，并设置其边框属性来绘制三角形。

总结来说，绘制三角形的关键在于合理利用CSS的边框属性，通过设置不同边框的宽度和颜色，以及隐藏不需要的边框，来实现所需的形状。这样的技巧在实际开发中非常有用，能够减少额外的HTML标记和图像资源的使用，从而提高页面性能和加载速度。