css怎样实现三角形 |css3字体效果

// 实现一个等腰三角形，定义一个宽高为0，边框为solid的元素
.triangle {
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: red; /* 改变顶部边框颜色 */
}

在上面的代码中，大家使用了border属性和border-top-color属性来创建一个三角形。border-width属性的值需要设置为0，border-style的值需要设置为solid或者dotted，表示边框的样式。同时，大家将border-top-color属性的值设置为希望三角形顶部的颜色即可。

// 实现一个直角三角形，定义一个宽高为0的元素
.triangle {
width: 0;
height: 0;
border-top: 50px solid red; /* 顶部边框为红色 */
border-right: 50px solid transparent; /* 右侧边框透明 */
}

上面的代码中，大家使用border-top和border-right属性来创建一个直角三角形。border-top表示上方边框，border-right表示右方边框。同样，大家需要将border-width属性的值设置为0，border-style的值设置为solid或者dotted。

使用这些简单的CSS属性，大家就可以轻松地创建出各种形状的三角形了。