如果箭头不需要边框效果，一个元素搞定了
<s></s>
<i></i>
:before 或者 ：after （content：" "）
都可以完成
如果需要边框效果，一般都是由两个元素，设置不同的颜色和显示位置，从而有了边框的效果
如：before和after一起使用
** 定义before-after选择器 **/ .before-after-common { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; z-index:1; } div.mini-table{ background-color:#ebf5fd; /*overflow:hidden; 可以避免外边距合并但影响箭头显示*/ position:relative; padding:0.5px 0px; /** avoid 外边距合并 **/ &:before{ .before-after-common; right: 22%; border-bottom-color: #ddd; border-width: 8px; } &:after{ .before-after-common; right: 265; border-bottom-color: #ebf5fd; border-width: 7px; } }
上面为less代码。
--------------------------------------------------------------------
<s>
<i></i>
</s>
这样也是可以实现的。
原文：http://www.cnblogs.com/rhett-web/p/4901707.html