欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

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

发布时间:2016-09-26  编辑:杨雨个人博客网站   点击:   

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

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

本文地址:http://itbyc.com/web/css3/11444.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1