通过CSS伪元素制作三角箭头教程
作者：秋了秋 发表时间：2015年03月30日
网页制作很多时候要用到三角箭头，比如说我们的QQ聊天对话框，微信聊天对话框以及网页的留言评论框都会用到三角箭头，虽然不一定都是用css写的，有的还是用图片做的，这就是传统的箭头模式，用图片虽然兼容性较好，但还得用ps美工，每次变换都得用ps编辑图片相当麻烦，灵活性不高。所以还是用css比较方便快捷。
现在就来教大家怎么弄这个三角箭头。举个例子：
一句话，培养丰富的精神世界，才是最重要滴 
这块的代码是：
<div class="c-main" style="padding: 20px 15px; line-height: 25px; margin-top: -2px; margin-left: 32px;margin-right: 32px; border-radius: 3px; position: relative; background: #fbfdfb; border: 1px #eee solid; font-size: 15px;"><img src="/images/smilies/icon_razz.gif" alt="表情" /> 一句话，培养丰富的精神世界，才是最重要滴 <img src="/images/smilies/icon_lol.gif" alt="表情" /></div>
我们现在做的就是加三角箭头，这块的class是c-main，可以用c-main:before和c-main:after伪类做两个箭头，从而节省了div代码，相关的css代码如下：
.c-main:before{
content: '';
border-top: 9px solid transparent;/*方框上部分背景颜色为透明*/
border-bottom: 9px solid transparent;/*方框下部分背景为透明*/
border-right: 9px solid #eee;/*箭头背景颜色*/
position: absolute;/*绝对定位1*/
top: 25px;/*距离顶部位置偏移量2*/
left: -9px;/*距离左边位置偏移量3*/ /*123都是控制显示位置的*/
}
.c-main:after{
content: '';
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right: 7px solid #fbfdfb;/*箭头背景颜色，覆盖前面的#eee颜色，使其颜色与整体颜色一致*/
position: absolute;
top: 27px;
left: -7px;
}
效果如下：
一句话，培养丰富的精神世界，才是最重要滴 因为border边框够粗，所以我把边框颜色理解为背景颜色，.c-main:before是一个箭头，.c-main:after是另外一个箭头，为什么要做两个箭头，是因为我们要有边框颜色的三角箭头，当第一个箭头（较大的）被第二个箭头（较小的）通过准确覆盖之后剩下没被覆盖的边缘就是合成三角箭头的边框了，其颜色就是较大的那个三角箭头的颜色，可调。而较小的那个三角箭头的颜色要设置成.c-main主体颜色，进行负值定位偏移时要把主体边框盖住，从而与主体合在一起。
这里事例的是指向左边的箭头，其它方向的同理可得，除了箭头指向的那个方向的border不用设置外，其它三边都要设置边框，位于箭头两边的边框颜色为透明（transparent），对边为主体边框颜色（较大的）/主体背景颜色（较小的）。还需要注意的是：定位类型一定不能少，主体c-main用相对定位position: relative;箭头.c-main:after和.c-main:before用绝对定位position: absolute;通过控制border的大小改变箭头整体大小，颜色等其它按需自行变化。
一句话，培养丰富的精神世界，才是最重要滴