css实现一个直角三角形

CSS 是网页设计中必不可少的技术之一。它可以用来美化页面，实现各种效果。下面我们来学习如何使用 CSS 实现一个直角三角形。

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

上面的代码中，我们创建了一个名为 triangle 的样式类。首先，我们将该元素的 width 和 height 属性设置为 0。然后，我们使用 border-top 属性将元素的顶部边界设置为 50px 的红色边框。注意，我们没有设置 border-bottom 属性，因此三角形的底部是开放的。接着，我们使用 border-right 和 border-left 属性将元素的右边框和左边框都设置为 50px 的透明边框。

这样，我们就成功地实现了一个直角三角形！可以在 HTML 页面中添加以下代码进行测试：

<div class="triangle"></div>

在浏览器中打开该页面，就可以看到我们刚刚创建的直角三角形了。