直角三角形案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                width: 0px;
                height: 0px;
                margin: 200px auto;

                border: 50px transparent solid;
                border-top-color: deepskyblue;
                
                border-right-color: deepskyblue;
                //旋转45
                transform:rotate(45deg);
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

完结

老江程序生涯

知识的搬运工,技术成就梦想。

知识的海洋很辽阔,永远也不要自我膨胀。

越努力越幸运

倒三角形案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                width: 0px;
                height: 0px;
                margin: 200px auto;
                border: 50px transparent solid;
                border-top-color: deepskyblue;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

完结

老江程序生涯

知识的搬运工,技术成就梦想。

知识的海洋很辽阔,永远也不要自我膨胀。

越努力越幸运

每天记录一点点。