转自：https://ydmgirls.com/posts/6GzfGe
在这篇文章中，我们会用三种不同的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来完成三角形的绘制。
主要思想
- 添加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
代码实现
<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，更欢迎热爱编程的妹子进入，让我们一起学习 并进步吧
