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

2017-03-07 13:43:39 css
下面小编就为大家带来一篇空心三角形的简单实现(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

效果图: 
 


 

 

ps:移入换色

实现代码:


    <style>   
    #talkbubble {   
    width: 120px;   
    height: 80px;   
    position: relative;   
    -moz-border-radius: 10px;   
    -webkit-border-radius: 10px;   
    border-radius: 10px;   
    border: 1px #808080 solid;   
    background-color: #fff;   
    }   
      
    #talkbubble:before {   
    content: " ";   
    position: absolute;   
    top: 100%;   
    left: 50px;   
    width: 0;   
    height: 0;   
    border-left: 15px solid transparent;   
    border-top: 15px solid #808080;   
    border-right: 15px solid transparent;   
    }   
      
    .inlayer:after {   
    content: " ";   
    position: absolute;   
    top: 100%;   
    left: 51px;   
    width: 0;   
    height: 0;   
    border-left: 14px solid transparent;   
    border-top: 14px solid #fff;   
    border-right: 14px solid transparent;   
    }   
      
    #talkbubble:hover {   
    background-color: #ff0000;   
    }   
      
    .inlayer:hover:after {   
    width: 0;   
    height: 0;   
    border-left: 14px solid transparent;   
    border-top: 14px solid #ff0000;   
    border-right: 14px solid transparent;   
    }   
    </style>   
      
    <!-- html -->   
    <div id="talkbubble" class="inlayer">   
    空心三角形   
    </div>   

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