css代码编写空心箭头

最新推荐文章于 2024-05-13 09:53:40 发布

泥猴桃

最新推荐文章于 2024-05-13 09:53:40 发布

阅读量750

点赞数

CC 4.0 BY-SA版权

分类专栏： css css3 文章标签： css 空心箭头

本文链接：https://blog.youkuaiyun.com/shi851051279/article/details/53489939

css 同时被 2 个专栏收录

11 篇文章

订阅专栏

css3

7 篇文章

订阅专栏

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

代码如下：

<!-- 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 -->   
<div id="talkbubble" class="inlayer">   
空心三角形箭头
</div>