css怎么两个直角三角形

CSS可以轻松地应用到网页元素上，使网页更富有美感和实用性。今天我们来学习如何通过CSS创建两个不同形状的三角形。

/* 直角三角形 */
.triangle {
   width: 0;
   height: 0;
   border-top: 50px solid red;
   border-right: 50px solid transparent;
}

上面的代码会创建一个红色的三角形，它的宽度和高度都为零，通过设置一个上边框和右边框，同时把右边框设置为透明，就可以让这个三角形呈现出直角。

/* 等腰三角形 */
.triangle {
   width: 0;
   height: 0;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   border-bottom: 50px solid blue;
}

上面的代码则会创建一个蓝色等腰三角形。与直角三角形不同的是，这里需要同时设置三边的边框，通过设置左和右边框为透明，就可以让它呈现出一个等腰三角形的形状。