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/