css制作三角形
使用 border 属性创建三角形
通过设置元素的 border 属性可以实现三角形效果。原理是利用边框的交界处形成的斜边。
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}调整边框方向控制三角形朝向
通过调整不同方向的边框宽度和颜色，可以控制三角形的朝向。
/* 向上三角形 */
.triangle-up {
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
}
/* 向下三角形 */
.triangle-down {
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid green;
}
/* 向左三角形 */
.triangle-left {
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 100px solid yellow;
}
/* 向右三角形 */
.triangle-right {
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 100px solid purple;
}使用 clip-path 创建三角形
clip-path 属性提供了更灵活的图形裁剪方式，可以直接绘制三角形。
.triangle-clip {
width: 100px;
height: 100px;
background-color: orange;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}使用 transform 旋转矩形
通过旋转正方形元素并隐藏部分内容，可以创建三角形效果。
.triangle-transform {
width: 100px;
height: 100px;
background-color: pink;
transform: rotate(45deg);
overflow: hidden;
position: relative;
}
.triangle-transform::after {
content: "";
position: absolute;
width: 71px; /* 100 / √2 ≈ 70.71 */
height: 71px;
background-color: white;
transform: rotate(45deg);
top: 15px;
left: 15px;
}使用 SVG 绘制三角形
SVG 是专门用于矢量图形的技术，绘制三角形非常直观。
<svg width="100" height="100" viewBox="0 0 100 100">
<polygon points="50,0 0,100 100,100" fill="brown"/>
</svg>注意事项
- 边框法创建的三角形大小由边框宽度决定，调整各边边框宽度可以改变三角形形状
- clip-path 方法在现代浏览器中支持良好，但需要考虑兼容性
- SVG 方法适合需要复杂图形或动画的场景
- 旋转矩形方法会产生锯齿，可能需要抗锯齿处理
