参考链接 纯 CSS 实现三角形的 3 种方式
html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li style="list-style: none;border:1px solid gray;padding:20px;margin:10px;">
<div>使用 CSS 绘制三角形的第一种方法就是使用 「border」 属性。给定一个宽度和高度都为 0 的元素，其 border 的任何值都会直接相交，我们可以利用这个交点来创建三角形。也就是说，border属性是三角形组成的，下面给每一边都提供不同的边框颜色：</div>
<div style="width:0;height:0;border:100px solid;border-color:red orange yellow green;"></div>
</li>
<li style="list-style: none;border:1px solid gray;padding:20px;margin:10px;">
<div>左右边框透明，下边框不透明</div>
<div style="width:0;height:0;border-left: 100px solid transparent;border-right: 100px solid transparent;border-bottom: 100px solid yellow;"></div>
</li>
<li style="list-style: none;border:1px solid gray;padding:20px;margin:10px;">
<div>上下边框透明，右边框不透明</div>
<div style="width:0;height:0;border-top: 100px solid transparent;border-bottom: 100px solid transparent;border-right: 100px solid orange;"></div>
</li>
<li style="list-style: none;border:1px solid gray;padding:20px;margin:10px;">
<div>左右边框透明，上边框不透明</div>
<div style="width:0;height:0;border-top: 100px solid red;border-left: 100px solid transparent;border-right: 100px solid transparent;"></div>
</li>
<li style="list-style: none;border:1px solid gray;padding:20px;margin:10px;">
<div>上下边框透明，左边框不透明</div>
<div style="width:0;height:0;border-top: 100px solid transparent;border-bottom: 100px solid transparent;border-left: 100px solid green;"></div>
</li>
</ul>
<ul>
<li style="list-style: none;border:1px solid gray;padding:20px;margin:10px;">
<div>clip-path 就是使用它来绘制多边形（或圆形、椭圆形等）并将其定位在元素内。实际上，浏览器不会绘制 clip-path 之外的任何区域，因此我们看到的是 clip-path 的边界。
下面来绘制一个指向右侧的三角形：
clip-path: polygon(0 0, 0% 100%, 100% 50%);
这个值是怎么来的呢？使用 clip-path 可以为沿路径放置的每个点定义坐标。在这种情况下，就定义了三个点：top-left (0 0)、bottom-left (0% 100%)、right-center (100% 50%)。效果如下：</div>
<div style="
width: 160px;
height: 200px;
background-color: skyblue;
clip-path: polygon(0 0, 0% 100%, 100% 50%);">
</div>
</li>
</ul>
<div style="width: 160px;
height: 200px;
outline: 2px solid skyblue;
background-repeat: no-repeat;
background-image: linear-gradient(32deg, orangered 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(148deg, orangered 50%, rgba(255, 255, 255, 0) 50%);
background-size: 100% 50%;
background-position: top left, bottom left;">
</div>
</body>
</html>