CSS技巧：如何用纯CSS绘制三角形

"前端大厂最新面试题——CSS画三角形" 在前端开发中，有时候我们需要创建特定的图形，例如三角形，用于各种设计元素，如地址选择器或播放按钮的图标。本篇讨论如何仅使用CSS来实现一个三角形，并解释其背后的原理。 CSS画三角形的核心在于理解CSS边框和盒模型。默认情况下，元素呈矩形，由边框（border）、内边距（padding）和内容区域（content area）组成。然而，通过巧妙地调整这些属性，我们可以创造出看似复杂的形状，如三角形。 首先，我们创建一个具有边框的元素，如下所示： ```css .border { width: 50px; height: 50px; border: 2px solid; border-color: #96ceb4 #ffeead #d9534f #ffad60; } ``` 这将显示一个四色边框的正方形。为了将其转换为三角形，我们需要逐渐减小内容区域的宽高，直到它们都变为0。这样做是因为三角形实际上是由被隐藏的边框部分构成的。例如，若要创建一个朝下的红色三角形，我们可以这样设置： ```css .border { width: 0; height: 0; border-style: solid; border-width: 0 50px 50px; border-color: transparent transparent #d9534f; } ``` 这里的`border-width`定义了边框的宽度，`border-color`设置了透明和不透明的颜色，使得只有下边框可见，形成一个红色的三角形。需要注意的是，尽管视觉上看起来是三角形，但实际上元素的大小并未改变，顶部的宽度仍然存在，只是被隐藏了。因此，为了完全消除顶部的宽度，我们可以将其设置为0： ```css .border { width: 0; height: 0; border-style: solid; border-width: 0 50px 50px; border-color: transparent transparent #d9534f; } ``` 若要创建一个空心的三角形，我们需要利用伪类`:before`或`:after`来添加一个更小的三角形并覆盖原有的实心部分。以下是一个例子： ```css .border { width: 0; height: 0; border-style: solid; border-width: 0 50px 50px; border-color: transparent transparent #d9534f; position: relative; } .border:after { content: ''; border-style: solid; border-width: 0 40px 40px; border-color: transparent transparent #96ceb4; position: absolute; top: 0; left: 0; } ``` 在这个例子中，`.border:after` 创建了一个相对较小的蓝色三角形，覆盖在原有的红色三角形上，形成了一个空心的红色三角形。 总结来说，使用CSS画三角形的原理是通过调整元素的边框宽度和颜色，以及利用透明度来“裁剪”不必要的部分，从而达到显示特定形状的目的。这种方法可以灵活地创建各种颜色和方向的三角形，而且在不需要额外图像资源的情况下提供了高效且易于维护的解决方案。对于前端开发者来说，掌握这一技巧对于构建复杂布局和自定义UI组件至关重要。