css 制作三角形
使用 CSS 制作三角形的方法
通过边框（border）属性实现
利用 CSS 的 border 属性可以轻松创建三角形。通过设置不同方向的边框颜色和宽度，并将元素的宽度和高度设为 0，可以形成三角形效果。
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #f00;
}上述代码会生成一个红色的等腰三角形，底边宽度为 100px，高度为 100px。
调整边框方向以改变三角形朝向
通过调整边框的显示方向，可以改变三角形的朝向。例如，以下代码生成一个向上的三角形：
.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #f00;
}生成向下的三角形：
.triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #f00;
}生成向左的三角形：
.triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 100px solid #f00;
}生成向右的三角形：
.triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 100px solid #f00;
}创建直角三角形
通过设置部分边框为透明，可以生成直角三角形。例如：
.right-triangle {
width: 0;
height: 0;
border-top: 100px solid #f00;
border-right: 100px solid transparent;
}使用 clip-path 属性
CSS 的 clip-path 属性提供了更灵活的图形裁剪功能，可以用于创建三角形。
.clip-triangle {
width: 100px;
height: 100px;
background-color: #f00;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}使用 transform 和伪元素
通过旋转伪元素，可以生成三角形。例如：
.transform-triangle {
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
}
.transform-triangle::after {
content: "";
position: absolute;
width: 141%;
height: 141%;
background-color: #f00;
transform: rotate(45deg);
top: -20%;
left: -20%;
}注意事项
- 边框法生成的三角形大小由边框宽度决定。
clip-path方法的兼容性较好，适合现代浏览器。- 旋转伪元素的方法可能需要对尺寸和位置进行微调。
以上方法可以根据实际需求选择使用，边框法简单直接，而 clip-path 和旋转伪元素的方法则更加灵活。
