继承父级颜色的语音气泡箭头

有趣的问题：

css3语音泡沫问题：对于“三角形”的边框颜色，如何将其设置为其父div的bgcolor自动设置的颜色？

— Jin Yang（@jzy） 2012年2月1日

通过“ css3语音泡沫”，Jin表示在容器上使用伪元素添加一点指针箭头（ 三角形 ）。 并不是真正CSS3，但这太过分了。

假设在外部CSS文件中设置粉红色是不切实际的。 也许是用户设置，或者也许是动态设置。

<div class="speech-bubble" style="background: pink;">
   I like bananas, because they have no bones.
</div>

将容器设置为内联样式很好，但是不幸的是，伪元素没有内联样式。 因此，我们最终可能会遇到以下情况：

笨蛋

虽然有解决方案！ 在为容器设置内联样式时，我们也可以为border-color设置内联样式。 即使容器实际上没有边框，我们也可以依靠继承将颜色向下传递给伪元素，该伪元素被视为子元素。

<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; 
}

请注意，我已经申请inherit到border-top-color ，而不是简写属性border-top 。 由于某种原因（请随时启发我）， inherit在速记中不起作用。 还要注意，当您用inherit覆盖颜色时，它不会从其上方的颜色集（黑色）“继承”，而是从其父级继承。 因此，如果需要默认值，则需要在父border-color上设置border-color 。

观看演示

翻译自: https://css-tricks.com/speech-bubble-arrows-that-inherit-parent-color/