空心三角形的简单实现(必看篇)

背景： 项目过程中有个tab切换需要用到空心三角形的效果。作为一名后端工程师，实在是不知道怎么写，在网上找了一些看了一下别人的实现方式，发现大多数都是实心三角。后来终于发现一个实现空心三角的，顿时热泪盈眶啊。实现效果比较粗略，不过还是思路还是比较清晰的，借鉴了一下，在原有的基础上做了一些改进，增加一些效果

空心三角原理：主要利用元素伪类(:before,:after)实现

效果图： 

 

ps：移入换色

实现代码：

CSS Code复制内容到剪贴板

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>   

转载于:https://www.cnblogs.com/shaoshuai0305/p/6046546.html