使用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

相關標籤/搜索