css代码编写空心箭头

本文主要是介绍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 -->   
<div id="talkbubble" class="inlayer">   
空心三角形箭头
</div>  

这篇关于css代码编写空心箭头的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---