css怎么写上下三角形 |css3 光照效果

.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.triangle-up {
border-bottom: 50px solid #f00;
}
.triangle-down {
border-top: 50px solid #f00;
}

首先，大家需要定义一个class为“triangle”的元素，设置其宽度为0，高度为0，并且设置其边框为透明。

然后，大家可以通过设置“triangle-up”或“triangle-down”的class来确定它是上三角形还是下三角形（假设大家想要红色的三角形，颜色可以根据需要进行更改）。对于上三角形，大家需要设置其底部的边框为50px宽度的红色（#f00）；对于下三角形，大家需要设置其顶部的边框为50px宽度的红色（#f00）。

这样，大家就完成了上下三角形的CSS样式设置。可以通过以下HTML代码演示：

<div class="triangle triangle-up"></div>
<div class="triangle triangle-down"></div>

以上HTML代码会产生一个红色的上三角形和一个红色的下三角形。

综上所述，通过设置透明的边框，大家可以非常简单地创建出上下三角形的样式。这种方法不仅简单易用，而且可以很容易地进行修改和定制，满足不同的网页设计需求。