html5 css 提示气泡框_css实现空心三角形边框
2017-11-20 14:29:17  By: dwtedx

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

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

css空心三角形


实现CSS代码:

<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代码:

<!-- html -->
<div id="talkbubble" class="inlayer">
    空心三角形
</div>


若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+