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

网站建设 2021-07-03 08:16www.dzhlxh.cn网站建设

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

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

效果图:

 

ps:移入换色

实现代码:

CSS Code复制内容到剪贴板
  1. <style>   
  2. #talkbubble {   
  3. width120px;   
  4. height80px;   
  5. positionrelative;   
  6. -moz-border-radius: 10px;   
  7. -webkit-border-radius: 10px;   
  8. border-radius: 10px;   
  9. border1px #808080 solid;   
  10. background-color#fff;   
  11. }   
  12.   
  13. #talkbubble:before {   
  14. content" ";   
  15. positionabsolute;   
  16. top: 100%;   
  17. left50px;   
  18. width: 0;   
  19. height: 0;   
  20. border-left15px solid transparent;   
  21. border-top15px solid #808080;   
  22. border-right15px solid transparent;   
  23. }   
  24.   
  25. .inlayer:after {   
  26. content" ";   
  27. positionabsolute;   
  28. top: 100%;   
  29. left51px;   
  30. width: 0;   
  31. height: 0;   
  32. border-left14px solid transparent;   
  33. border-top14px solid #fff;   
  34. border-right14px 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-left14px solid transparent;   
  45. border-top14px solid #ff0000;   
  46. border-right14px solid transparent;   
  47. }   
  48. </style>   
  49.   
  50. <!-- html -->   
  51. <div id="talkbubble" class="inlayer">   
  52. 空心三角形   
  53. </div>   

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

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板