用伪类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手段实现不了的边框效果都可以用叠加背景色来达到目的。
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/4128.html