CSS提供了三种制作基本形状的好方法。本文将看看如何使用这些方法来实现三角形。三种方法如下：border。线性渐变。剪辑路径。1.border使用CSS绘制三角形的第一种方法是使用“border”属性。给定一个宽度和高度为0的元素，它的边框的任何值都会直接相交，我们可以使用这个交点来创建一个三角形。也就是说，border属性是由三角形组成的，每条边都设置了不同的边框颜色：.triangle{width:0;高度：0；边框：100px实心；border-color:orangeredskybluegoldyellowgreen;}将element的长宽都设置为0，效果如下：可以看到，我们基本实现了4个三角形。所以三角形可以根据边界特征来绘制。如果你想要一个向下的三角形，你可以让边框的顶部可见，并将其他边设置为透明：.triangle{width:0;高度：0；border-top:50pxsolidskyblue;border-right:50pxsolidtransparent;border-left:50pxsolidtransparent;}如果你想要一个指向右边的三角形，可以让border的左边可见，其他边设置为透明：.triangle{width:0;高度：0；border-left:50pxsolidskyblue;border-top:50px实心透明；border-bottom:50pxsolidtransparent;}上面的代码也可以这样写：.triangle{border-style:solid;边框颜色：透明；边框宽度：50px050px50px；border-left-color:skyblue;}我们也可以通过调整不同方向的边框值来实现不同方向和大小的三角形：.triangle{width:0;高度：0；border-top:100pxsolidskyblue;border-right:100pxsolidtransparent;}当然也可以实现等边三角形：.triangle{width:0;高度：0；左边框：69px实心透明；border-right:69pxsolidtransparent;border-bottom:120pxsolidskyblue;}2.linear-gradientlinear-gradient需要结合background-image来实现一个三角形。接下来我们就用渐变一步步实现一个三角形。首先，让我们画一个矩形：.triangle{width:80px;高度：100px；背景重复：不重复；outline:1pxsolidskyblue;}效果如下：接下来添加渐变，这会让元素一半是红色：background-image:linear-gradient(45deg,orangered50%,rgba(255,255,255,0)50%);效果如下：我们的目标是创建一个看起来和使用border方法时一样的三角形。因此，需要调整background-size和background-position的值：background-size:100%50%;效果如下：形状看起来有点奇怪，因为渐变设置成45度角。需要调整角度，使三角形的顶边从左上角到右边的中间。可以使用浏览器开发者工具进行调试，直到达到预期效果。将线性渐变值更新为：background-image:linear-gradient(32deg,orangered50%,rgba(255,255,255,0)50%);效果如下：这其实是一个三角形，但还不是我们想要的效果。对于线性渐变，我们需要添加多个背景来实现三角形。让我们添加它的镜像效果：background-image:linear-gradient(32deg,orangered50%,rgba(255,255,255,0)50%),linear-gradient(148deg,orangered50%,rgba(255,255,255,0)50%);效果如下：看起来离三角形的距离还很远，不过只需要最后一步，调整两个三角形的位置即可，这里使用background-position属性来调整：background-position：左上角，左下角；效果如下：这样就实现了三角形效果（去掉轮廓即可），最终代码如下：.triangle{width:160px;高度：200px；轮廓：2px纯天蓝色；背景重复：不重复；背景图像：线性渐变（32deg，orangered50%，rgba（255、255、255、0）50%），线性渐变（148deg，orangered50%，rgba（255、255、255），0）50%);背景大小：100%50%；background-position:topleft,bottomleft;}CSS线性渐变可用于创建多种形状。但是它也有缺点，就是需要调试合适的梯度角度。3、clip-path的最后一个方法——clip-path，精简且可扩展。但是目前它的浏览器兼容性不是很好。使用时要考虑浏览器是否支持。我们先画一个带背景颜色的矩形：.triangle{width:80px;高度：100px；background-color:skyblue;}效果如下：clip-path是用它来绘制多边形（或者圆形，椭圆等），并在元素内部定位。事实上，浏览器并没有在clip-path之外绘制任何区域，所以我们看到的是clip-path的边框。让我们画一个指向右边的三角形：clip-path:polygon(00,0%100%,100%50%);这个值是怎么来的？使用clip-path可以为每个Points定义坐标。在这种情况下，定义了三个点：左上(00)、左下(0%100%)、右中(100%50%)。效果如下：完整代码如下：.triangle{margin:100px;宽度：160px；高度：200px；背景颜色：天蓝色；clip-path:polygon(00,0%100%,100%50%);}可以使用在线工具试验这个属性并绘制不同的图形：https://bennettfeely.com/clippy/。这篇文章到此结束，你还知道用纯CSS实现三角形的其他方法吗？
