---- 淘宝优惠券 ----欢迎到论坛交流 ---域名问题某些图片和js资源无法访问,导致一些代码实例无法运行!(代码里gzui.net换成momen.vip即可)

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

前端开发 蚂蚁 1028℃ 0评论

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/

转载请注明:有爱前端 » CSS技巧:继承父元素颜色实现泡泡下方的箭头

喜欢 (1)or分享 (0)
发表我的评论
取消评论

表情