用CSS伪类制作三角形时的边框问题

PHPABC CSS 1,755 次浏览 , 没有评论

用伪类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的宽度,所以没有边框,那么结合起来就是下面这样:
css三角形箭头
可以看出有多么不和谐。这个问题实在不懂,纠结了很久也考虑过用图片,今天逛其他人的博客时偶然发现其实可以通过beforeafter两个不同颜色的三角形错开而叠加出一条边框来:
CSS三角形箭头
这时候蓝色相当于边框了,可以通过调整两个三角的位移来调整边框的像素。
知道思路一切就简单了,最终完成如下图:
CSS三角形箭头
其实很多常规CSS手段实现不了的边框效果都可以用叠加背景色来达到目的。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go