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

时间 2019-12-10

标签使用制做三角形繁體版

原文原文链接

使用before、after伪类实现三角形的制做，不须要再为三角形增长没必要要的DOM元素，影响阅读。html

<!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>spa