css实现三角形

ChenCh.

已于 2022-03-13 17:43:01 修改

阅读量199

点赞数

文章标签： css html css3

于 2022-03-13 17:41:35 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_49274461/article/details/123462958

版权

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 0;
            height: 0;
            content: "";
            border-right: 100px solid transparent;
            border-top: 100px solid #f00;
            border-left: 100px solid transparent;
            border-bottom: 100px solid transparent;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        /**
         * 记忆技巧：盒子宽高均为0
                    三边颜色皆透明
         */
    </script>
</body>
</html>