如何使用 CSS 绘制三角形

在这篇文章中，我们会用三种不同的CSS 方式绘制三角形，并总结每种情况的优缺点。其中之一是比较传统的使用 border绘制，另外两个是分别使用clip-path 和 liner-gradient()绘制。

使用 border

使用 border 是 CSS 绘制三角形最经典的方式也是目前最流行的一个方案。它的主要思想是设置元素的 width 和 height 等于 0，三角形实际的宽度和高度取决于border的宽度。

我们拿顶点向上三角形举例

image.png

知道具体思想后，同理可以设置不同顶点方向的三角形代码如下

<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>

.arrow-up {
 width: 0; 
 height: 0; 
 border-left: 5px solid transparent;
 border-right: 5px solid transparent;

 border-bottom: 5px solid black;
}

.arrow-down {
 width: 0; 
 height: 0; 
 border-left: 20px solid transparent;
 border-right: 20px solid transparent;

 border-top: 20px solid #f00;
}

.arrow-right {
 width: 0; 
 height: 0; 
 border-top: 60px solid transparent;
 border-bottom: 60px solid transparent;

 border-left: 60px solid green;
}

.arrow-left {
 width: 0; 
 height: 0; 
 border-top: 10px solid transparent;
 border-bottom: 10px solid transparent; 

 border-right:10px solid blue; 
}

利用 border 绘制三角形适用于所有的浏览器，但是这种绘图方式并不是 border 属性专门设计的解决方案，所以当我们想要在三角形内添加内容的时候，并不会出现我们预期的效果

优点：

兼容性：所有的浏览器都兼容此方法
简单：使用简单，易于理解

缺点：

如果在三角形中添加内容的话，并不能满足我们的需求

使用background-image

使用 background-image 属性绘制三角形，在这里我们无需引入图片，使用linear-gradient来完成三角形的绘制。

主要思想

添加linear-gradient属性，朝着右下角添加在 50%的位置由透明到红色的线性渐变
添加linear-gradient属性，朝着右上角添加在 50%的位置由红色到透明的线性渐变
设置两个渐变区域的宽度为50%背景宽度
将两个渐变区域定位到一左一右

image.png

代码实现

<div class="triangle"></div>

.triangle {
  width: 300px;
  height: 300px;
  background-image:
    linear-gradient(to bottom right, transparent 50%, red 0),
    linear-gradient(to top right, red 50%, transparent 0);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  background-position: left, right;
}

这种方式绘制出的三角形他的容器依然是一个长方形，所以如果我们在容器内添加内容的话操作起来不会有太多的局限性。

优点：

兼容：浏览器兼容性很好
响应式：它会随着容器的尺寸改变而改变
完美添加内容：容器的大小不会因为背景设置的改变而改变，所以添加文本或其它内容很简单

缺点：

实现起来复杂，不易理解

使用clip-path

image.png

代码实现

<div class="triangle"></div>

.triangle {
  width: 300px;
  height: 300px;
  background: red linear-gradient(red, blue);
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}

使用这种方式要特别注意的是，裁剪区以外的部分全部不可视，包括内容和像border 、shadow、outline等的属性。

polygon只是clip-path 众多属性中的一个，你可以用 clip-path 的其他属性裁剪出任意你想要的图形。

优点：

简单：clip-path 功能强大且用途广泛，允许任何形状，而不仅仅是三角形
响应式：他会根据容器的大小进行调整
可定制：渐变和效果只要在可见区域内就不是问题

缺点：

兼容性：浏览器兼容性不是很好
容易出错：裁剪区以外的所有内容都不显示，可能导致意想不到的结果

总结

CSS一直在不断的迭代更新，现在有绘图属性 clip-path 和 background-image，这使绘制三角形更加多样性，而且比border 更加灵活和易于维护。我们用锤子把钉子钉在墙上而不是用螺丝刀，同样的，比起死板的 border方式，使用更适合的方式完成任务会更符合我们的预期。当然，没有绝对的好与不好，只有适合与不适合，在使用过程中可以根据问题情况酌情选择方案。

对学习抱有热情的开发小伙伴欢迎加入 qq群685421881，更欢迎热爱编程的妹子进入，让我们一起学习并进步吧