用css伪类制作三角形

.contact_div:after{content:""; display:block; width:0; height:0; position:absolute; left:121px; top:-30px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid transparent; border-bottom:5px solid #FFF}

用伪类before和after制作三角形箭头网上有一堆教程代码，挺简单的。

箭头向上：

#content:before{position:absolute;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:9px solid #ccc;content:" ";display:block;width:0;height:0}

位置自己调整一下即可，向下、左、右 以此类推，对于content仅有背景色而没有边框的情况下是毫无违和感的。

关键来了：自家主题有一个地方用到这个小三角，就是回复嵌套的评论，俺的嵌套评论是带边框的，而伪类制作的三角形本身就是border的宽度，所以没有边框，那么结合起来就是下面这样：





可以看出有多么不和谐。这个问题实在不懂，纠结了很久也考虑过用图片，今天逛其他人的博客时偶然发现其实可以通过before和after两个不同颜色的三角形错开而叠加出一条边框来：





这时候蓝色相当于边框了，可以通过调整两个三角的位移来调整边框的像素。

知道思路一切就简单了，最终完成如下图：





其实很多常规CSS手段实现不了的边框效果都可以用叠加背景色来达到目的。