怎么用CSS繪制三角形箭頭圖案

這篇文章主要介紹“怎么用CSS繪制三角形箭頭圖案”，在日常操作中，相信很多人在怎么用CSS繪制三角形箭頭圖案問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用CSS繪制三角形箭頭圖案”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

CSS代碼

CSS Code復制內容到剪貼板

1. /* create an arrow that points up */  

2. div.arrow-up {   

3.  width: 0;    

4.  height: 0;    

5.  border-left: 5px solid transparent;  /* left arrow slant */  

6.  border-right: 5px solid transparent; /* right arrow slant */  

7.  border-bottom: 5px solid #2f2f2f; /* bottom, add background color here */  

8.  font-size: 0;   

9.  line-height: 0;   

10. }   

11.   

12. /* create an arrow that points down */  

13. div.arrow-down {   

14.  width: 0;    

15.  height: 0;    

16.  border-left: 5px solid transparent;   

17.  border-right: 5px solid transparent;   

18.  border-top: 5px solid #2f2f2f;   

19.  font-size: 0;   

20.  line-height: 0;   

21. }   

22.   

23. /* create an arrow that points left */  

24. div.arrow-left {   

25.  width: 0;    

26.  height: 0;    

27.  border-bottom: 5px solid transparent;  /* left arrow slant */  

28.  border-top: 5px solid transparent; /* right arrow slant */  

29.  border-right: 5px solid #2f2f2f; /* bottom, add background color here */  

30.  font-size: 0;   

31.  line-height: 0;   

32. }   

33.   

34. /* create an arrow that points right */  

35. div.arrow-rightright {   

36.  width: 0;    

37.  height: 0;    

38.  border-bottom: 5px solid transparent;  /* left arrow slant */  

39.  border-top: 5px solid transparent; /* right arrow slant */  

40.  border-left: 5px solid #2f2f2f; /* bottom, add background color here */  

41.  font-size: 0;   

42.  line-height: 0;   

43. }   

繪制這些三角形的關鍵在于，你要讓箭頭所指方向的兩個側邊有很粗的邊框。而背向箭頭方向的一邊也是同樣粗的邊框，而這條邊的顏色就是你的三角形的顏色。邊框越粗，三角形越大。用這種方法你可以繪制出各種顏色、各種大小、各種朝向的箭頭。最妙的是，你只需要幾行CSS代碼就能實現這種效果。

使用:before和:after繪制CSS三角形

上面的CSS例子使用的是真正的頁面元素進行繪制，但有時候這個真正的元素還有它用，你不能走上面直接進行操作，這是怎么辦？純CSS的三角形其實還可以使用偽元素(pseudo-element)進行繪制。下面就是繪制方法：

CSS Code復制內容到剪貼板

1. div.tooltip {   

2.  /* tooltip content styling in here; nothing to do with arrows */  

3. }   

4.   

5. /* shared with before and after */  

6. div.tooltip:before, div.tooltip:after {   

7.  content: ' ';   

8.  height: 0;   

9.  position: absolute;   

10.  width: 0;   

11.  border: 10px solid transparent; /* arrow size */  

12. }   

13.   

14. /* these arrows will point up */  

15.   

16. /* top-stacked, smaller arrow */  

17. div.tooltip:before {   

18.  border-bottom-color: #fff;  /* arrow color */  

19.   

20.  /* positioning */  

21.  position: absolute;   

22.  top: -19px;   

23.  left: 255px;   

24.  z-index: 2;   

25. }   

26.   

27. /* arrow which acts as a background shadow */  

28. div.tooltip:after {   

29.  border-bottom-color: #333;  /* arrow color */  

30.   

31.  /* positioning */  

32.  position: absolute;   

33.  top: -24px;   

34.  left: 255px;   

35.  z-index: 1;   

36. }   

背向箭頭的那一側的邊框的顏色就是三角形箭頭的顏色。畫這個箭頭并不需要同時使用:before和:after兩個偽元素——一個就夠了。而另外一個，你可以把它用作前一個的背景陰影或背景邊。

到此，關于“怎么用CSS繪制三角形箭頭圖案”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！