css怎么制作三角形
使用边框（border）属性
通过设置元素的宽度和高度为0，利用边框的透明属性来创建三角形。不同方向的边框组合可以生成不同朝向的三角形。
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}border-left和border-right设置为透明，border-bottom显示颜色，生成一个向上的三角形。- 调整边框方向（如
border-top）可以改变三角形的朝向。
使用旋转和伪元素
通过伪元素（如 ::before 或 ::after）结合 transform 旋转一个矩形，生成三角形。
.triangle {
position: relative;
width: 100px;
height: 100px;
}
.triangle::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: red;
transform: rotate(45deg) skew(20deg, 20deg);
}- 通过调整
rotate和skew的值控制三角形的形状。
使用 clip-path 属性
通过 clip-path 直接裁剪出三角形路径，适合复杂图形或需要更精确控制的情况。
.triangle {
width: 100px;
height: 100px;
background: red;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}polygon的三个坐标点分别定义三角形的顶点（顶部中点、左下角、右下角）。- 调整坐标百分比可以改变三角形的形状和方向。
使用线性渐变（linear-gradient）
通过背景的线性渐变模拟三角形效果，适合简单场景。
.triangle {
width: 100px;
height: 100px;
background: linear-gradient(to bottom right, red 50%, transparent 50%);
}to bottom right定义渐变方向，red 50%和transparent 50%形成对角分界线。- 结合多个渐变可以生成更复杂的三角形。
注意事项
- 边框法兼容性最好，但无法实现斜边渐变或复杂效果。
clip-path和渐变法可能需要考虑浏览器兼容性（如旧版IE不支持）。- 旋转法可能影响布局，需结合
position调整。
