CSS技巧:继承父元素颜色实现泡泡下方的箭头

http://www.cnblogs.com/ebread/archive/2012/02/28/2371519.html
由于这是一个改良的问题,所以原文前面哪些洛里啰嗦的话就不讲了,大概说说要做什么。

要实现的是下面的那个三角。通常我们会用一个width 和 height 都为0的div,然后通过设置各个边的border来实现。但是这样会有复用问题,如果我们有多重颜色的气泡,那就要写多个颜色了,维护起来十分麻烦。

原文作者利用的pseudo元素,实现了这种继承,通过设置content:""来把pseudo元素设置为0宽高,再设置border。下面上代码。

<div class="speech-bubble" style="border-color: pink; background: pink;">
   I like bananas, because they have no bones.
</div>
.speech-bubble:after {
   content: "";
   position: absolute;
   top: 100%;
   left: 20px;
   border-top: 20px solid black;
   border-top-color: inherit;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
}

主要看CSS片段,由于用了:after,所以可以通过border-top-color来继承父元素的颜色。如果要改颜色(蓝色),则只需要将

style="border-color: pink; background: pink;
改为

style="border-color: blue; background: blue;
就能一起改了,换句话说可以通过inline的方式更改颜色,一次改两个。

最后放上jsFiddle的地址 http://jsfiddle.net/chriscoyier/taaGc/1/

THE END
分享
二维码
打赏
< <上一篇
下一篇>>