用CSS伪元素制作箭头
生活随笔
收集整理的這篇文章主要介紹了
用CSS伪元素制作箭头
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
現(xiàn)在讓我們開始制作箭頭吧！
在開始前，你要知道如何用CSS去畫一個三角形，如果還不清楚可以看看這里純CSS畫各種圖形
我們用到兩個CSS偽元素，before和after，它們屬于行內(nèi)元素，但可以用display來改變，before和after是在CSS2的新特性（現(xiàn)在已經(jīng)老了），瀏覽器對其兼容性還未了解。
實現(xiàn)代碼如下：
1 <!--CSS樣式，在項目中可以把相同的屬性與屬性值對寫在一起，這里是方便學習--> 2 <style> 3 .divtest{ 4 position: absolute; 5 left: 100px; 6 height: 40px; 7 width: 200px; 8 padding-left: 30px; 9 background: red; 10 line-height: 40px; 11 } 12 .divtest:before{ 13 content: ''; 14 position: absolute; 15 top: 0; 16 left: -20px; 17 height: 0; 18 width: 0; 19 border-top: 20px solid rgb(255, 0, 0); 20 border-left: 20px solid #FFFFFF; 21 /* border-right: 20px solid #AF9E9E; */ 22 border-bottom: 20px solid #FF0000; 23 background: red; 24 } 25 .divtest:after{ 26 content: ''; 27 position: absolute; 28 top: 0; 29 right: -20px; 30 height: 0; 31 width: 0; 32 border-top: 20px solid rgb(255, 255, 255); 33 border-left: 20px solid #FF0000; 34 /* border-right: 20px solid #AF9E9E; */ 35 border-bottom: 20px solid #FFFFFF; 36 background: red; 37 } 38 </style> 39 <body> 40 <div class="divtest"> 41 這是一個箭頭 42 </div>?效果圖：
這是一個箭頭?
?
這里用CSS偽元素實現(xiàn)了前后兩個小三角形，一個白色一個紅色，分別添加到div塊元素的前后，就變成了箭頭。當然稍作修改也可以實現(xiàn)下面的箭頭
這是一個箭頭?
?
?除了這些，你還可以為這些箭頭添加樣式，如漸變、投影、邊距、旋轉(zhuǎn)等
下面是邊框的代碼，觀察一下邊緣處的分配原則：
1 <style> 2 .divtest1{ 3 width:0; 4 height:0; 5 border-top: 40px solid blue; 6 border-left: 40px solid red; 7 border-right:40px solid yellow; 8 border-bottom: 40px solid green; 9 } 10 </style> 11 <div class="divtest1"> </div>效果圖：
??這個例子，我們可以更好的理解邊框了。
轉(zhuǎn)載于:https://www.cnblogs.com/zquancai/p/4039239.html
《新程序員》：云原生和全面數(shù)字化實踐50位技術專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的用CSS伪元素制作箭头的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Eclipse调试Bug的七种常用技巧（
- 下一篇： 纯CSS实现下拉菜单及下拉容器等（纯CS