剛剛做題遇到這樣一道題
其中 第一個和第二個都比較簡單。第三個要注意的是
第三幅圖。主要運用的就是利用偽類。要形成上面這個圖。我們只需要用到兩個偽類元素：after和：before.利用第二個after：后面的內容 移動到前一個元素下面一點點。間隔間距大小根據div邊框border大小而定。這里兩個位置不重合的部分即為這個圖像。。就和這一樣。
<!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>
效果圖如圖所示
這相當於。第一個div:before 的border顏色設置為div框一樣的顏色 即black；margin-top:-20px;
第二個div:after的border顏色設置為DIV的背景顏色（這里是白色）然后也向上平移margin-top:-19px.
這樣就能遮住before的大部分內容。就留下1px的間隙，正好給形成上面這幅圖。