如何用僞類畫出一個三角形

時間 2019-11-12

標籤如何畫出一個三角形简体版

原文原文鏈接

剛剛作題遇到這樣一道題

其中第一個和第二個都比較簡單。第三個要注意的是
第三幅圖。主要運用的就是利用僞類。要造成上面這個圖。咱們只須要用到兩個僞類元素：after和：before.利用第二個after：後面的內容移動到前一個元素下面一點點。間隔間距大小根據div邊框border大小而定。這裏兩個位置不重合的部分即爲這個圖像。。就和這同樣。html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" content="僞類寫三角形">
    <title>Document</title>
    <style>
    div{
        width:200px;
        height:100px;
        position: relative;
        margin:50px auto;
        border:1px solid black;
    }
    div:before{
        content:"";
        border:10px solid transparent;
        border-bottom-color:black;
        position:absolute;
        left:20px;
        top:0;
        margin-top:-20px;

    }
    div:after{
        content:"";
        border:10px solid transparent;
        border-bottom-color:white;
        position: absolute;
        top:0;
        left:20px;
        margin-top:-19px;
    }

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