DIV CSS 佈局教程網

背景： 項目過程中有個tab切換需要用到空心三角形的效果。作為一名後端工程師，實在是不知道怎麼寫，在網上找了一些看了一下別人的實現方式，發現大多數都是實心三角。後來終於發現一個實現空心三角的，頓時熱淚盈眶啊。實現效果比較粗略，不過還是思路還是比較清晰的，借鑒了一下，在原有的基礎上做了一些改進，增加一些效果

空心三角原理：主要利用元素偽類(:before,:after)實現

效果圖：

ps：移入換色

實現代碼：

1. <style>   
2. #talkbubble {   
3. width: 120px;   
4. height: 80px;   
5. position: relative;   
6. -moz-border-radius: 10px;   
7. -webkit-border-radius: 10px;   
8. border-radius: 10px;   
9. border: 1px #808080 solid;   
10. background-color: #fff;   
11. }   
12.   
13. #talkbubble:before {   
14. content: " ";   
15. position: absolute;   
16. top: 100%;   
17. left: 50px;   
18. width: 0;   
19. height: 0;   
20. border-left: 15px solid transparent;   
21. border-top: 15px solid #808080;   
22. border-right: 15px solid transparent;   
23. }   
24.   
25. .inlayer:after {   
26. content: " ";   
27. position: absolute;   
28. top: 100%;   
29. left: 51px;   
30. width: 0;   
31. height: 0;   
32. border-left: 14px solid transparent;   
33. border-top: 14px solid #fff;   
34. border-right: 14px solid transparent;   
35. }   
36.   
37. #talkbubble:hover {   
38. background-color: #ff0000;   
39. }   
40.   
41. .inlayer:hover:after {   
42. width: 0;   
43. height: 0;   
44. border-left: 14px solid transparent;   
45. border-top: 14px solid #ff0000;   
46. border-right: 14px solid transparent;   
47. }   
48. </style>   
49.   
50. <!-- html -->   
51. <div id="talkbubble" class="inlayer">   
52. 空心三角形   
53. </div>   

以上這篇空心三角形的簡單實現(必看篇)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。