关于css伪元素的背景色

问题描述

问 题

上图是知乎写文章界面时选择话题的panel，上面有一个小三角是用伪元素实现的，我复制了代码过来，只有背景颜色是灰色的，如下图，background-color也没用，请问怎么才能让它背景透明

-------修正：20161130
经"边城"同学提醒，确实是一灰一白两个三角形，都是伪元素，面我们看到的白色三角形是after实现的(border-bottom: 9px solid #FFF;)，
灰色的通过before(border-bottom: 9px solid rgba(0,0,0,.08);)实现的，如下：

before和after之间还有一点不同就是top，before (top: -9px;),而after (top: -10px;),由于before和after本身的先后关系导致after在上before在下以及他们的位置基本重叠，所以top就使得下层的before只漏出边框。这样就形成一个白色带灰边框的三角形。

解决方案

通过css绘制三角形的话是是通过设置border实现的，你把border-color改成透明就好了

这篇关于关于css伪元素的背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！