关于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只漏出边框。这样就形成一个白色带灰边框的三角形。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
通过css绘制三角形的话是是通过设置border实现的,你把border-color改成透明就好了