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

网络
乐观主义者从每一个灾难中看到机遇，而悲观主义都从每一个机遇中看到灾难。无论有多困难，都坚强地抬头挺胸，人生是一场醒悟，不要昨日，不要明天，只要今日。

背景： 项目过程中有个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#808080solid;
  10. background-color:#fff;
  11. }
  13. #talkbubble:before{
  14. content:"";
  15. position:absolute;
  16. top:100%;
  17. left:50px;
  18. width:0;
  19. height:0;
  20. border-left:15pxsolidtransparent;
  21. border-top:15pxsolid#808080;
  22. border-right:15pxsolidtransparent;
  23. }
  25. .inlayer:after{
  26. content:"";
  27. position:absolute;
  28. top:100%;
  29. left:51px;
  30. width:0;
  31. height:0;
  32. border-left:14pxsolidtransparent;
  33. border-top:14pxsolid#fff;
  34. border-right:14pxsolidtransparent;
  35. }
  37. #talkbubble:hover{
  38. background-color:#ff0000;
  39. }
  41. .inlayer:hover:after{
  42. width:0;
  43. height:0;
  44. border-left:14pxsolidtransparent;
  45. border-top:14pxsolid#ff0000;
  46. border-right:14pxsolidtransparent;
  47. }
  48. </style>
  50. <!--html-->
  51. <divid="talkbubble"class="inlayer">
  52. 空心三角形
  53. </div>

以上这篇空心三角形的简单实现(必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

您可能有感兴趣的文章
CSS如何实现Tab布局的简单实例(必看)
CSS水平居中总结(新手必看篇)
CSS重要属性之 margin 属性知识大整合(必看篇)
CSS 之margin知识点(必看)
HTML CSS样式基础(必看篇)