HTML/CSS画三角形

最新推荐文章于 2024-04-02 20:23:57 发布

zhanghuali2019

最新推荐文章于 2024-04-02 20:23:57 发布

阅读量263

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/zhanghuali0210/article/details/82629234

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin-top:20px;
        }
        .san1{
            width:0;
            height:0;
            border-left:50px solid transparent;
            border-right:50px solid transparent;
            border-bottom:100px solid red;
        }
        .san2{
            width:0;
            height:0;
            border-left:50px solid transparent;
            border-right:50px solid transparent;
            border-top:100px solid red;
        }
        .san3{
            width:0;
            height:0;
            border-top:50px solid transparent;
            border-bottom:50px solid transparent;
            border-right:100px solid red;
        }
        .san4{
            width:0;
            height:0;
            border-top:50px solid transparent;
            border-bottom:50px solid transparent;
            border-left:100px solid red;
        }
    </style>
</head>
<body>
    <div class="san1"></div>
    <div class="san2"></div>
    <div class="san3"></div>
    <div class="san4"></div>
</body>
</html>

结果展示：