网页制作很多时候要用到三角箭头，比如说我们的QQ聊天对话框，微信聊天对话框以及网页的留言评论框都会用到三角箭头，虽然不一定都是用css写的，有的还是用图片做的，这就是传统的箭头模式，用图片虽然兼容性较好，但还得用ps美工，每次变换都得用ps编辑图片相当麻烦，灵活性不高。所以还是用css比较方便快捷。
现在就来教大家怎么弄这个三角箭头。举个例子：
这块的代码是：
我们现在做的就是加三角箭头，这块的class是c-main，可以用c-main:before和c-main:after伪类做两个箭头，从而节省了div代码，相关的css代码如下：
因为border边框够粗，所以我把边框颜色理解为背景颜色，.c-main:before是一个箭头，.c-main:after是另外一个箭头，为什么要做两个箭头，是因为我们要有边框颜色的三角箭头，当第一个箭头（较大的）被第二个箭头（较小的）通过准确覆盖之后剩下没被覆盖的边缘就是合成三角箭头的边框了，其颜色就是较大的那个三角箭头的颜色，可调。而较小的那个三角箭头的颜色要设置成.c-main主体颜色，进行负值定位偏移时要把主体边框盖住，从而与主体合在一起。
这里事例的是指向左边的箭头，其它方向的同理可得，除了箭头指向的那个方向的border不用设置外，其它三边都要设置边框，位于箭头两边的边框颜色为透明（transparent），对边为主体边框颜色（较大的）/主体背景颜色（较小的）。还需要注意的是：定位类型一定不能少，主体c-main用相对定位position: relative;箭头.c-main:after和.c-main:before用绝对定位position: absolute;通过控制border的大小改变箭头整体大小，颜色等其它按需自行变化。