css等边三角 |css3图片垂直居中

.triangle {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 50px solid #F00;
border-right: 50px solid #F00;
}

通过设置border-top，left和right的值，大家可以制作一个宽高均为50px的红色等边三角形。具体来说，大家将border-top设置为透明色，这样就不会产生上边框，而左右两条边框大家都设置为红色，这样就得到了一个红色等边三角形。

此外，大家还可以利用其他属性来制作出更多类型的等边三角形。比如，大家可以利用border-radius属性和伪元素before和after来制作圆角等边三角形。

.triangle2:before {
content: "";
display: block;
width: 0;
height: 0;
border-top: 60px solid #0F0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-radius: 0 0 10px 10px;
}
.triangle2:after {
content: "";
display: block;
width: 0;
height: 0;
border-top: 60px solid transparent;
border-left: 30px solid #0F0;
border-right: 30px solid #0F0;
border-radius: 0 0 10px 10px;
}

通过设置各个边框的值和边框半径，大家可以制作出绿色圆角等边三角形。

总的来说，利用CSS的border属性和其他相关属性，大家可以轻松地制作出各种样式的等边三角形，这为网页设计带来了更多可能性。