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

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

原文：http://css-tricks.com/speech-bubble-arrows-that-inherit-parent-color/

由于这是一个改良的问题，所以原文前面哪些洛里啰嗦的话就不讲了，大概说说要做什么。

要实现的是下面的那个三角。通常我们会用一个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/

转载于:https://www.cnblogs.com/hejinmin/archive/2012/02/28/2371670.html