<div class="left"></div>.left { position: absolute;}.left:before, .left:after { position: absolute; content: ''; border-top: 100px transparent dotted; border-left: 100px transparent dotted; border-bottom: 100px transparent dotted;}.left:before{ border-right: 100px #a00 dotted;}.left:after{ left: 10px; border-right: 100px #fff dotted;}顯示出來是：這是為何呢？若把上面代碼的后兩類改為：.left:before{ border-right: 100px #a00 solid;}.left:after{ left: 10px; border-right: 100px #fff solid;}顯示出來是：為什么會這樣呢？
1 回答
POPMUISE
TA貢獻(xiàn)1765條經(jīng)驗(yàn) 獲得超5個贊
其實(shí)這個跟偽元素實(shí)現(xiàn)三角形的類似，before先創(chuàng)建一個三角形
接著after也創(chuàng)建一個和before一樣的三角形，然后left移動一定的偏移量，并設(shè)置為白色（這里我設(shè)置為藍(lán)色比較明顯）覆蓋before就形成
緊接著把border-style設(shè)置為dotted
就形成您所說的效果
完全復(fù)制你的代碼得到的是這樣的效果：
- 1 回答
- 0 關(guān)注
- 773 瀏覽
添加回答
舉報(bào)
0/150
提交
取消