在前端开发中，输出三角形（箭头）是一项常见的操作。而使用 LESS，可以很方便地输出各种形状的三角形。LESS 是一种 CSS 的扩展语言，它可以使用类似编程语言的方式来编写 CSS，使得 CSS 代码更加可读、可维护、易于调试。接下来，我们将介绍利用 LESS 实现三角形的方法。
利用 :after 和 :before 伪元素实现三角形
在 CSS 中，使用 :after 和 :before 伪元素可以向元素的内容之前和之后添加内容。我们可以利用这两个伪元素来实现三角形。
下面是一个实现三角形的例子：
.triangle {
width: 0;
height: 0;
border-top: 20px solid black;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
}在上面的例子中，我们设置了一个宽度和高度为 0 的方框，并设置了三条边框，其中上边框为黑色，右、左边框为透明。这样就形成了一个上边朝上的三角形。
要改变三角形的方向，只需要更改边框的设置即可，比如 border-bottom: 20px solid black; 就会生成一个上边朝下的三角形。
利用变量和 mixin
LESS 支持变量和 mixin，我们可以在 LESS 中使用它们来增强 CSS 的功能。
首先是变量，我们可以定义一些颜色或者数值，比如：
@darkblue: #00008B; @lightgreen: #90EE90; @length: 50px;
然后在样式中引用这些变量，比如：
.triangle {
width: 0;
height: 0;
border-top: @length solid @darkblue;
border-right: @length solid transparent;
border-left: @length solid transparent;
}这样就可以让样式更加灵活，更易于修改。
其次是 mixin，mixin 是一段可以被重复调用的 CSS 代码片段。我们可以使用 mixin 来避免重复编写代码，提高代码的可维护性。
下面是一个 mixin 的例子：
.triangleMixin(@color: #000000, @size: 20px) {
width: 0;
height: 0;
border-top: @size solid @color;
border-right: @size solid transparent;
border-left: @size solid transparent;
}在上面的例子中，我们定义了一个 triangleMixin 的 mixin，它支持两个参数 @color 和 @size。然后我们可以在样式中使用它，比如：
.triangle-1 {
.triangleMixin(@darkblue, 30px);
}
.triangle-2 {
.triangleMixin(@lightgreen, 50px);
}这样我们就可以方便地重复使用这个 mixin，并且根据情况传入不同的参数来设置三角形的颜色和大小。
利用 extend 和父选择器
LESS 提供了 extend 关键字，我们可以使用它来继承现有的样式，而不是使用 mixin。
下面是一个使用 extend 的例子：
-- -------------------- ---- ------- --------- - ------ -- ------- -- ----------- ---- ----- ------ ------------- ---- ----- ------------ ------------ ---- ----- ------------ - ------------- - -------------------- ----------------- ---- - -------------- - -------------------- ----------------- ----- -
在上面的例子中，我们定义了一个 .triangle 的样式，然后通过 extend 继承它，分别生成了红色和蓝色的三角形样式。通过这种方式，我们可以方便地生成一系列具有类似样式的元素，而不必重复编写样式。
总结
利用 LESS 可以方便地实现各种形状的三角形，同时提高代码的可维护性和复用性。上文介绍了利用 :after 和 :before 伪元素、变量和 mixin、extend 和父选择器等方法实现三角形的方法，并给出了详细的示例代码。希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6459fa3b968c7c53b0c1586a