用CSS绘制一个三角形

1、使用 border 实现 

① 原理：

一个盒子的宽高为0时，由其边框粗细和颜色决定盒子的状态。盒子的四个边框组合成为一个正方形的盒子。如图：

当一边有颜色，其他都是透明色的时候，就是我们想要的三角形了。如图

那如何显示一个直角三角形呢，只需要将临近的两边都显示颜色，其他都是透明即可！如图

② 实际例子： 

  

等边三角形：

具体代码：

用css创建一个三角形，并简述原理_小草莓蹦蹦跳的博客-CSDN博客

 

2、linear-gradient

linear-gradient 需要结合 background-image 来实现三角形，下面就来逐步使用渐变实现一个三角形。输入密码 · 语雀

 

3、 clip-path

最后一种方法 —— clip-path，它是最精简和最可具扩展性的。

不过目前其在浏览器兼容性不是很好，使用时要考虑浏览器是否支持。

①  原理

使用 clip-path 可以为沿路径放置的每个点定义坐标。在这种情况下，就定义了三个点：
top-left (0 0) 、 bottom-left (0% 100%) 、 right-center (100% 50%) 

clip-path 就是使用它来绘制多边形(或圆形、圆形等)并将其定位在元素内。实际上，浏览器不会绘制 clip-path 之外的任何区域，因此我们看到的是 clip-path 的边界。

② 实例例子