主页 > 网站建设 >

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

网站建设 2023-01-28 21:38www.1681989.com免费网站

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

以上这篇空心三角形的简单实现(必看篇)就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。

上一篇：CSS水平居中总结(新手必看篇) 下一篇：元素绝对定位以后设置了高宽,a标签不能点击的原

网站设计

Copyright © 2016-2025 www.1681989.com 推火网 版权所有 Power by