before要素にも色を指定したい

Question

CSSで吹き出しを作成し、そこにせりふを入れるというページを作成しようとしています。
border要素で作成した三角が、せりふの入る部分と同じ色にしたいのです。
様々な色を利用するため、吹き出しの色を別のクラスで指定したく、以下のようなコードを作成しました所、せりふの入る部分は色の指定ができたのですが、before要素内の、border要素で作成した三角には色が継承されません。

<div class="color say">
    <p>せりふが入ります。</p>
</div>

.say {
  display: inline-block;
  position: relative;
  width: 90%;
  height: auto;
  margin: 0 0 10px 85px;
  padding: 17px 13px;
  border-radius: 12px;
  font-size: 2em;
}
.say:before {
  content: "";
  position: absolute;
  top: 25px;
  left: -24px;
  border: 12px solid transparent;
  border-right-color: inherit;
}
.color {
  background-color: orange;
}

before要素に強制継承のinheritを入れてみたのですが、うまくいきませんでした。
継承のルールに違反している部分があったのでしょうか・・・改善策を何卒ご教授賜りたく存じます。

Answer 1

background-colorはborder-colorに継承しないと思いますよ。

.color::before {
  border-right-color: orange;
}

---

inheritを使うなら。

.color {
  background-color: orange;
  border-color: orange; /* ADD */
/*color: orange; *//* これでも反映するが、文字もorangeに。 */
}
```**動くサンプル：**[https://jsfiddle.net/gb81Lumw/1/](https://jsfiddle.net/gb81Lumw/1/)

Comments

[jyansinkai]

.color にbeforeをつけ、そこに設定するという発想には至りませんでした。ご教授頂き、誠に有難うございました。