當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

用CSS伪元素制作箭头

發布時間：2025/4/5 CSS 27 豆豆

生活随笔收集整理的這篇文章主要介紹了用CSS伪元素制作箭头小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

現在讓我們開始制作箭頭吧！

在開始前，你要知道如何用CSS去畫一個三角形，如果還不清楚可以看看這里純CSS畫各種圖形

我們用到兩個CSS偽元素，before和after，它們屬于行內元素，但可以用display來改變，before和after是在CSS2的新特性（現在已經老了），瀏覽器對其兼容性還未了解。

實現代碼如下：

1  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偽元素實現了前后兩個小三角形，一個白色一個紅色，分別添加到div塊元素的前后，就變成了箭頭。當然稍作修改也可以實現下面的箭頭

這是一個箭頭

?除了這些，你還可以為這些箭頭添加樣式，如漸變、投影、邊距、旋轉等

下面是邊框的代碼，觀察一下邊緣處的分配原則：

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>

效果圖：

?這個例子，我們可以更好的理解邊框了。

轉載于:https://www.cnblogs.com/zquancai/p/4039239.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的用CSS伪元素制作箭头的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Eclipse调试Bug的七种常用技巧（
下一篇：网页插件学javascript还是jqu