说在前面
🎈在CSS中画三角形通常利用border属性来实现，通过设置三个边的宽度为0，并为一个边提供颜色，结合transform属性进行旋转，可以创建一个三角形。以下是几种常见的CSS三角形的实现方法：
方法1：使用border
1<div class="triangle"></div>
2<style>
3.triangle {
4 width: 0;
5 height: 0;
6 border-style: solid;
7 border-width: 0 50px 100px 50px;
8 border-color: transparent transparent red transparent;
9}
10</style>
上面代码中，.triangle类创建了一个红色的三角形，其中border-width定义了三角形的三个宽度，最后一个宽度定义了三角形的底边，其他三个宽度设置为0，以形成三角形的尖角。border-color定义了三角形的颜色，除了底边颜色外，其他三个颜色设置为transparent（透明）。得到的三角形如下：
方法2：使用clip-path
1<div class="triangle-clip"></div>
2<style>
3.triangle-clip {
4 clip-path: polygon(50% 0, 0 100%, 100% 100%);
5 height: 100px;
6 width: 100px;
7 background-color: red;
8}
9</style>
上面代码中，.triangle-clip类使用clip-path属性来裁剪元素，形成一个三角形。polygon函数定义了三角形的三个顶点。得到的三角形如下：
方法3：使用:before伪元素
1<div class="triangle-before"></div>
2<style>
3.triangle-before::before {
4 content: "";
5 display: block;
6 width: 0;
7 height: 0;
8 border-style: solid;
9 border-width: 0 50px 100px 50px;
10 border-color: transparent transparent red transparent;
11}
12</style>
上面代码中，.triangle-before::before伪元素创建了一个红色的三角形，其中border-width定义了三角形的三个宽度，最后一个宽度定义了三角形的底边，其他三个宽度设置为0，以形成三角形的尖角。border-color定义了三角形的颜色，除了底边颜色外，其他三个颜色设置为transparent（透明）。得到的三角形如下：
方法4：使用::after伪元素
1<div class="triangle-after"></div>
2<style>
3 .triangle-after::after {
4 content: "";
5 display: block;
6 width: 0;
7 height: 0;
8 border-style: solid;
9 border-width: 0 50px 100px 50px;
10 border-color: transparent transparent red transparent;
11 }
12</style>
上面代码中，.triangle-after::after伪元素创建了一个红色的三角形，其中border-width定义了三角形的三个宽度，最后一个宽度定义了三角形的底边，其他三个宽度设置为0，以形成三角形的尖角。border-color定义了三角形的颜色，除了底边颜色外，其他三个颜色设置为transparent（透明）。得到的三角形如下：
方法5：使用svg
1<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
2 <polygon points="50,0 100,100 0,100" fill="red" />
3</svg>
得到的三角形如下： 在上面代码中，SVG的poygon元素用于创建一个三角形，points属性定义了三角形的三个顶点。得到的三角形如下：
l
方法6：使用绝对定位+伪元素
1<div class="position-triangle"></div>
2<style>
3.position-triangle {
4 position: relative;
5 overflow: hidden;
6 height: 100px;
7 width: 100px;
8}
9.position-triangle::after {
10 content: "";
11 position: absolute;
12 width: 200px;
13 height: 200px;
14 background: red;
15 transform: rotate(45deg);
16 transform-origin: center;
17 top: 50%;
18}
19</style>
这个需要我们自己调整容器和伪元素的宽高、角度及定位来形成我们想要的三角形，上面代码得到的三角形如下：
