單標(biāo)簽純css指的是不需要閉合標(biāo)簽,只需要使用css即可實(shí)現(xiàn)一些效果的標(biāo)簽。這些標(biāo)簽的實(shí)現(xiàn)方式比較巧妙,也比較簡單,因此可以用來實(shí)現(xiàn)一些特殊效果。
<div class="arrow-up"></div> .arrow-up { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid black; }
上面的代碼展示了一個箭頭的樣式,它只需要一個div標(biāo)簽即可實(shí)現(xiàn)。關(guān)鍵在于利用了邊框的特性,通過設(shè)置左、右邊框?yàn)橥该鳎撞窟吙驗(yàn)閷?shí)線,就可以達(dá)到箭頭的效果。
<div class="circle"></div> .circle { width: 50px; height: 50px; border-radius: 50%; background-color: red; }
接下來展示了一個圓形的樣式,同樣只需要一個div標(biāo)簽即可實(shí)現(xiàn)。利用了border-radius屬性實(shí)現(xiàn)圓形,同時設(shè)置寬高和背景顏色即可。
<div class="triangle-up"></div> .triangle-up { width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-bottom: 50px solid red; }
最后再展示一個三角形的樣式,同樣也只需要一個div標(biāo)簽即可實(shí)現(xiàn)。利用了邊框的特性,將左右邊框設(shè)置為透明,底部邊框設(shè)置為實(shí)線,高度為0,就可以實(shí)現(xiàn)一個平底三角形的效果。
總的來說,單標(biāo)簽純css的技巧雖然不算特別實(shí)用,但是在特殊效果的實(shí)現(xiàn)上還是蠻有趣的一個探索。