您的位置：首页 > Web前端 > CSS

css代码编写空心箭头

2016-12-06 17:29 429 查看

突然发现现在这种空心箭头特别流行，也许很早以前就流行了，最近才注意到，汗啊，研究了一下结合网上的资料稍微整理了下！

效果如图：

代码如下：

<!-- 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
4000
;
}

#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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航