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

使用 border

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

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

 

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

<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来完成三角形的绘制。

主要思想

1. 添加linear-gradient属性，朝着右下角添加在 50%的位置 由透明到红色的线性渐变

2. 添加linear-gradient属性，朝着右上角添加在 50%的位置 由红色到透明的线性渐变

3. 设置两个渐变区域的宽度为50%背景宽度

4. 将两个渐变区域定位到一左一右

 

代码实现

<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

 

 

代码实现

<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方式，使用更适合的方式完成任务会更符合我们的预期。当然，没有绝对的好与不好，只有适合与不适合，在使用过程中可以根据问题情况酌情选择方案。