在一些面经中，经常可以在CSS相关的题目中看到如何使用CSS绘制三角形，而常见的答案通常只有一种使用border绘制的方法。CSS发展到今天，只用CSS绘制三角形其实有很多有趣的方法。本文将详细列出它们。通过这篇文章，你可以学到6种用CSS绘制三角形的方法，而且都非常容易掌握。当然，本文只是抛砖引玉，CSS日新月异，可能还有一些有趣的方法是本文遗漏的。使用边框绘制三角形使用边框实现三角形应该是大多数人都掌握的，并且经常出现在各个方面。它使用一个高度和宽度为零和透明边框的容器。简单代码如下：div{border-top:50pxsolidyellowgreen;border-bottom:50pxsoliddeeppink;border-left:50pxsolidbisque;border-right:50pxsolidchocolate;}容器的高和宽为零，不同颜色的边框为set:这样，任意三个边边框的颜色都是透明的，所以很容易得到各种角度的三角形：CodePenDemo-实现带边框的三角形[1]用linear-gradient绘制三角形接下来，我们使用linear-渐变实现三角形。它的原理也很简单，我们实现一个45°的渐变：div{width:100px;height:100px;background:linear-gradient(45deg,deeppink,yellowgreen);}让它的颜色从渐变变成两个固定颜色：div{width:100px;height:100px;background:linear-gradient(45deg,deeppink,deeppink50%,yellowgreen50%,yellowgreen100%);}然后使其中一种颜色透明：div{background:linear-gradient(45deg,deeppink,deeppink50%,transparent50%,transparent100%);}通过旋转rotate或scale，我们也可以得到各种角度和大小的三角形。完整的demo可以点击这里：CodePenDemo-使用线性渐变实现Triangle[2]使用conic-gradient绘制三角形或者渐变。上面我们使用线性渐变来实现三角形。有趣的是，在渐变家族中，角度渐变conic-gradients也可以用来实现三角形。方法是可以设置角度梯度的中心点，类似的也可以设置径向梯度的中心点。我们把角度渐变的中心点设置在50%0，也就是centertop，容器顶部的中间，然后进行角度渐变，渐变在一定的角度范围内，都是三角形数字。假设我们有一个高宽为200pxx100px的容器，将其角度渐变圆的圆心设置为50%0:，并设置为从90°开始绘制角度渐变图，示意图如下：可以看到角度渐变的渐变动画，一开始角度渐变图形在到达第二条边之前都是三角形。我们可以通过选择合适的角度轻松得到一个三角形：div{background:conic-gradient(from90degat50%0,deeppink0,deeppink45deg,transparent45.1deg);}使用conic-gradient实现的三角形在上面的代码中，额外的0.1degdeeppink45deg,transparent45.1deg是为了简单的消除渐变产生的锯齿效果。这样我们用conic-gradient也很容易得到一个三角形。同理，通过旋转或缩放，我们也可以得到各种角度和大小的三角形。完整的demo可以点击这里：CodePenDemo-使用角度渐变实现三角形[3]transform:rotatewithoverflow:hidden绘制三角形的方法比较常规，使用transform:rotatewithoverflow:hidden。一目了然，一学就会。简单的动画示意图如下：在左下角设置图形的旋转中心为左下角，用overflow:hidden旋转。完整代码：.triangle{width:141px;height:100px;position:relative;overflow:hidden;&::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:deeppink;transform-origin:leftbottom;transform:rotate(45deg);}}CodePenDemo-transform:rotatewithoverflow:hidden实现三角形【4】使用clip-path绘制三角形clip-path是一个非常有趣的CSS属性。clip-pathCSS属性创建一个裁剪区域，其中仅显示元素的一部分。区域内的部分显示，区域外的部分隐藏。剪辑区域由从嵌入式URL或外部SVG引用的路径定义。换句话说，使用clip-path将容器剪切到我们想要的任何位置。通过3个坐标点，实现一个多边形，多余的空间会被剪掉。代码也很简单：div{background:deeppink;clip-path:polygon(00,100%0,0100%,00);}使用clip-path实现的三角形CodePenDemo-使用clip-path实现三角形[5]在这个网站——CSSclip-pathmaker[6]中，你可以快速创建简单的clip-path图形并得到相应的CSS代码。用字符画三角形OK，最后一个有点独特的，就是用字符来表示三角形。下面列出了一些三角形字符的十进制Unicode表示。?:??:?▼:▼▲:▲⊿:⊿△:△比如我们用▼来实现一个三角形▼，代码如下：
