css怎么弄三角形 |css伪类三角箭头

.triangle {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 50px solid red;
border-bottom: 50px solid transparent;
}

上面的代码使用了border属性来实现三角形的效果，通过调整border的宽度、高度和颜色来满足不同样式的需求。

如果想要制作倒三角形，只需要将border改为border-bottom就行了。

.triangle-inverse {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid red;
}

除了使用border，还可以使用伪元素:before和:after来实现三角形的效果，这样可以更加灵活，可以实现各种形状的三角形。

.triangle-pseudo {
position: relative;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 50px solid red;
border-bottom: 50px solid transparent;
}
.triangle-pseudo:before {
content: "";
position: absolute;
top: -50px;
left: -50px;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid red;
border-bottom: 50px solid transparent;
}

上面的代码中，通过:before伪元素来制作出一个三角形的断面，从而实现了更加复杂的三角形形状。

通过以上这些方法，大家就可以很灵活地使用CSS来制作出各种样式的三角形了。希望这篇文章对你有所帮助！