一： 前言
CSS 实现三角形的方式，是工作中经常遇见的，和面试常问的， 今天通过总结实现三角形的实现方式， 进一步加深对 CSS 的理解
1、实现方式一： 边框法
先写一个简单的 DIV 增加边框看一下效果
<div class="triangle1"></div>
.triangle1 {
width: 100px;
height: 100px;
border: 100px;
border-style: solid;
border-color: #f00 #ff0 #0ff #0f0;
border-width: 100px 100px 100px 100px;
}
此时可以看出，当边框变粗时， 四周的边框会呈现四个梯形， 随着宽高的减少，逐步缩减成三角形
此时， 我们就得到了四个正三角形， 如果需要调整三角形的角度和方向，可以设置 border-width 或者 transform 旋转， 只取其中一个的话， 其他位置可以设置为 透明背景色即可
2、实现方式二： 背景渐变法
.triangle2 {
width: 100px;
height: 100px;
background: linear-gradient(#fff 0% 50%, #0ff 50%, #0ff 100%);
border: rgb(55, 0, 255) 1px solid;
}
CSS 的背景渐变。不仅仅可以渐变，也可以设置这种分界明显的过渡，这里设置了前 50% 为白色，后 50% 为蓝色。 我们利用这一点， 增加角度
.triangle2 {
width: 200px;
height: 100px;
background: linear-gradient(
-25deg,
transparent 0% 50%,
#0ff 50%,
#0ff 100%
);
我们将背景设置为透明， 给背景设置渐变，通过调整宽高和角度， 来实现自定义的三角形
线型渐变可以，角向渐变也是可以的
3、实现方式三： clip-path
裁剪形状类的需求，基本都可以通过clip-path 来实现， 只需要设置几个顶点坐标，进行区域链接即可
如果没有思路。可以打开这个网站，很轻松。我们就会对图形进行设置了
在我们打开网站后， 发现默认就是三角形， 通过拖动顶点，我们可以设置自己想要的三角形， 然后将代码复制
clip-path: polygon(56% 17%, 0 71%, 100% 100%);
clip-path 还有很多属性和形状， 有兴趣可以了解更多
4、实现方式四： 旋转 + 超出隐藏
该思路就是，设置元素旋转， 让其超出部分隐藏， 已达到显示角的目的
.triangle4 {
width: 200px;
height: 100px;
background-color: rgba(0, 300, 0, 0.3);
overflow: hidden;
position: relative;
}
.triangle4::after {
position: absolute;
content: "";
transform: rotate(326deg);
background-color: #fff;
width: 125%;
height: 175%;
}
我们通过一个元素设置relative 并且 overflow为 hidden ， 同时设置伪元素背景色为白色， 调整伪元素的旋转角度及宽高， 可以调整元素的三角形状的展示
5、 实现方式五：SVG 实现
SVG 对多边形的处理非常友好
<svg height="210" width="500">
<polygon
points="200,10 250,190 160,210"
style="fill: lime; stroke: purple; stroke-width: 1"
/>
</svg>
</div>
更多点击查看 www.runoob.com/svg/svg-pol…
6、实现方式六： 字体
◄ : ◄
► : ►
▼ : ▼
▲ : ▲
⊿ : ⊿
△ : △
上面是十进制的一些Unicon字体码
<div class="normal">▼</div>
