[分享]Css写等边直角三角形

发布于 2024-11-11 15:24:42

Css写等边直角三角形方法如下：

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

上面的代码利用了border的组合属性，border-top确定了等边直角三角形的底边宽度和颜色，border-right、bottom、left使这个三角形里面三边都为90度。

如果要把三角形旋转为不同的角度，只需再加一个transform属性：

.triangle{
    width:0px;
    height:0px;
    border-top:50px solid #f00;
    border-right:50px solid transparent;
    border-bottom:0px solid transparent;
    border-left:0px solid transparent;
    transform:rotate(30deg); /* 旋转30度 */
}

接下来是一个完整的html实例：

<html>
<head>
    <title>等边直角三角形</title>
    <style type="text/css">
        .triangle{
            width:0px;
            height:0px;
            border-top:50px solid #f00;
            border-right:50px solid transparent;
            border-bottom:0px solid transparent;
            border-left:0px solid transparent;
        }
        .triangle-30{
            transform:rotate(30deg); /* 旋转30度 */
        }
    </style>
</head>
<body>
    <div class="triangle"></div>
    <div class="triangle triangle-30"></div>
</body>
</html>

上面的实例中，我们展示了两个不同角度的等边直角三角形。

css 教程