主页 / 网站建设 /

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

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

背景： 项目过程中有个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>   

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

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

网站设计

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

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