css中三角形怎么写 |在线美化css代码

1. border属性实现

.triangle {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #000000;
}

实现中，首先将宽度和高度设为0，以便只显示三角形部分。然后，利用border的特性，将左右两侧的边框设置为透明，底部边框设置为目标颜色，即可形成一个三角形。

2. transform属性实现

.triangle {
width: 0;
height: 0;
border-top: 10px solid #000000;
border-right: 10px solid transparent;
transform: rotate(45deg);
}

实现中，也先将宽度和高度设为0，然后将上方边框设置为目标颜色，右侧边框设置为透明。最后利用transform属性，将元素旋转45度，就能得到一个三角形了。

3. :before和:after伪元素实现

.triangle {
position: relative;
width: 0;
height: 0;
}
.triangle:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 10px solid #000000;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.triangle:after {
content: "";
position: absolute;
top: 0;
right: 0;
border-bottom: 10px solid #000000;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}

实现中，首先需要将元素的位置属性设为relative，为后面的伪元素布局提供参考。然后，分别用:before和:after伪元素，分别放置在左右两个角上，通过设置三个边框的样式，将两个伪元素组合起来，就可以形成一个三角形了。