[分享]css写一个三角形

在CSS中，我们可以使用边框来创建三角形。通常，在一个正方形或矩形中，第一个角是一个直角，所以我们可以利用这个角的边框来创建三角形。.triangle { width: 0; height: 0; b...

在CSS中，我们可以使用边框来创建三角形。通常，在一个正方形或矩形中，第一个角是一个直角，所以我们可以利用这个角的边框来创建三角形。

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

上面的代码中，我们创建了一个宽度和高度都为0的div，然后我们为其设置了边框。上边框和下边框的样式都是透明的，这样就只有左边和右边有边框了。我们可以利用这个设置，让三角形成为一个等腰直角三角形，其中一个角的角度是90度。

接下来，我们需要将边框的颜色转为透明，然后让边界相交的部分形成直角。要实现这个效果，我们需要稍微改变一下代码：

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

通过这样的设置，三角形就完成了。上边框和下边框是透明的，左边框没有设置，右边框是红色的。这样，我们就可以轻松地在网页中创建出三角形了。