Sprechblasenspitzen, die die Farbe des Elternelements übernehmen

Interessante Frage

CSS3-Sprechblasen-Frage: Wie kann ich für die Rahmenfarbe des "Dreiecks" diese automatisch auf die Hintergrundfarbe seines übergeordneten Divs setzen?

— Jin Yang (@jzy) 1. Februar 2012

Mit "CSS3-Sprechblase" meint Jin die Verwendung eines Pseudoelements an einem Container, um eine kleine Pfeilspitze (Dreieck) hinzuzufügen. Nicht wirklich CSS3, aber das ist kleinlich.

Nehmen wir an, diese pinke Farbe ist nicht praktisch in einer externen CSS-Datei festzulegen. Vielleicht ist es eine Benutzereinstellung oder wird irgendwie dynamisch gesetzt.

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

Das Setzen des Containers mit einem Inline-Stil ist in Ordnung, aber leider gibt es keinen Inline-Stil für Pseudoelemente. Daher könnten wir am Ende etwas wie das hier haben

Mist.

Es gibt jedoch eine Lösung! Während wir den Inline-Stil für den Container setzen, können wir auch einen Inline-Stil für border-color setzen. Auch wenn der Container tatsächlich keinen Rand hat, können wir uns auf Vererbung verlassen, um diese Farbe an das Pseudoelement weiterzugeben, das als untergeordnetes Element behandelt wird.

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

Dann werden wir in unserem Code für das Pseudoelement explizit festlegen, dass es die Farbe erbt

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

Beachten Sie, dass ich inherit auf border-top-color angewendet habe, anstatt auf die Kurzschreibweise border-top. Aus irgendeinem Grund (klären Sie mich gerne auf) funktioniert inherit in der Kurzschreibweise nicht. Beachten Sie auch, dass beim Überschreiben der Farbe mit inherit diese nicht von der direkt darüber gesetzten Farbe (schwarz) "geerbt" wird, sondern vom übergeordneten Element. Wenn Sie also einen Standardwert benötigen, müssen Sie die border-color am übergeordneten Element festlegen.

Demo ansehen