使用before、after伪类制作三角形

最新推荐文章于 2022-09-21 09:12:00 发布

weixin_34212189

最新推荐文章于 2022-09-21 09:12:00 发布

阅读量283

点赞数

使用before、after伪类实现三角形的制作，不需要再为三角形增加不必要的DOM元素，影响阅读。

<!DOCTYPE html>
<html>
<head>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
        }
        div:before,
        div:after{
            content: "";
            position: absolute;
            top: 40px;
            left: 100px;
            width: 0px;
            height: 0px;
            border: 10px solid transparent;
            border-left-color: rgb(255,255,255);

        }
        div:before{
            top: 39px;
            border: 11px solid transparent;
            border-left-color: #ccc;
        }
    </style>

</head>
<body>
    <div></div>
</body>
</html>