纯CSS实现箭头、气泡让提示功能具有三角形图标（简单实例）

<style type="text/css">
/*向上箭头，类似A，只有三个边，不能指定上边框*/
.arrow-up {
width: 0px;
height: 0px;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid yellow;
/*以下属性可以是IE5兼容*/
font-size: 0px;
line-height: 0px;
}
/*向下箭头 ，类似 V*/
.arrow-down {
width: 0px;
height: 0px;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid blue;
font-size: 0px;
line-height: 0px;
}
/*向左的箭头：只有三个边：上，下，右。而<|总体来看，向左三角形的高=上+下边框的长度。宽=右边框的长度*/
div.arrow-left {
width: 0px;
height: 0px;
border-bottom: 30px solid transparent;
border-top: 30px solid transparent;
border-right: 40px solid green;
font-size: 0px;
line-height: 0px;
}
/*向右的箭头：只有三个边：上，下，左。而|>总体来看，向右三角形的高=上+下边框的长度。宽=左边框的长度*/
div.arrow-right {
width: 0px;
height: 0px;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 60px solid black;
font-size: 0px;
line-height: 0px;
}
</style>

 

<div class="back">
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<hr />
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</div>

 

此方式浏览器兼容，显示结果：

 

<style type="text/css">
/*气泡 效果样式控制
支持IE8 以上版本
*/
div.tooltip {
/*tooltip content*/
background: #eee;
border: 1px solid #ccc;
padding: 10px;
border-radius: 8px;
box-shadow: 0px 5px 10px rgba(255,0,255,0.5);
position: relative;
width: 200px;
margin-left: 50px;
margin-top: 50px;
}
/*背景 在上面*/
div.tooltip:after {
position: absolute;
display: inline-block;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid red;
left: -10px;
top: 20px;
content: '';
}
/*箭头-：before and after，
一起组成了好看的气泡小箭
----在下面
*/
div.tooltip:before {
position: absolute;
display: inline-block;
border-top: 20px solid transparent;
border-right: 20px solid green;
border-bottom: 20px solid transparent;
left: -20px;
top: 10px;
content: '';
}
</style>

<div class="backTwo">

<div class="tooltip">
向左的箭头: 只有三个边：上、下、右。
<br />而 < | 总体来看，向左三角形的高=上+下边框的长度。 宽=右边框的长度
<br />
<br />
向右的箭头: 只有三个边：上、下、左。
<br />而 |> 总体来看，向右三角形的高=上+下边框的长度。 宽=左边框的长度
</div>

</div>

显示结果：