{"id":16193,"date":"2012-02-06T10:57:42","date_gmt":"2012-02-06T17:57:42","guid":{"rendered":"http:\/\/css-tricks.com\/?p=16193"},"modified":"2012-02-06T10:57:42","modified_gmt":"2012-02-06T17:57:42","slug":"speech-bubble-arrows-that-inherit-parent-color","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/speech-bubble-arrows-that-inherit-parent-color\/","title":{"rendered":"Speech Bubble Arrows that Inherit Parent Color"},"content":{"rendered":"<p>Interesting question:<\/p>\n<blockquote class=\"twitter-tweet\">\n<p>css3 speech bubble question: for the &#8220;triangle&#8221;&#8216;s border color, how can I set it to whatever its parent div&#8217;s bgcolor is automagically?<\/p>\n<p>&mdash; Jin Yang (@jzy) <a href=\"https:\/\/twitter.com\/jzy\/status\/164834827814703104\" data-datetime=\"2012-02-01T22:17:40+00:00\" rel=\"noopener\">February 1, 2012<\/a><\/p><\/blockquote>\n<p><!--more--><br \/>\n<script src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>By &#8220;css3 speech bubble&#8221;, Jin means using a pseudo element on a container to add a little pointer arrow (<a href=\"https:\/\/css-tricks.com\/snippets\/css\/css-triangle\/\">triangle<\/a>). Not really CSS3, but that&#8217;s pedantic.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/02\/speechbubble.png?resize=305%2C155\" alt=\"\" title=\"speechbubble\" width=\"305\" height=\"155\" class=\"alignnone size-full wp-image-16232\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/02\/speechbubble.png?w=305&amp;ssl=1 305w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/02\/speechbubble.png?resize=300%2C152&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/p>\n<p>Let&#8217;s say that pink color isn&#8217;t practical to set in an external CSS file. Perhaps is a user setting, or perhaps its set dynamically somehow. <\/p>\n<pre rel=\"HTML\"><code>&lt;div class=\"speech-bubble\" style=\"background: pink;\"&gt;\r\n   I like bananas, because they have no bones.\r\n&lt;\/div&gt;<\/code><\/pre>\n<p>Setting the container with an inline style is all well and good, but unfortunately there is no inline style for pseudo elements. So we might end up with something like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/02\/blacktriangle.png?resize=301%2C157\" alt=\"\" title=\"blacktriangle\" width=\"301\" height=\"157\" class=\"alignnone size-full wp-image-16233\" data-recalc-dims=\"1\" \/><\/p>\n<p>Bummer. <\/p>\n<p>There is a solution though! While we are setting the inline style for the container, we can set an inline style for <code>border-color<\/code> too. Even though the container actually has no border, we can rely on inheritance to pass that color down to the pseudo element, which is treated like a child element. <\/p>\n<pre rel=\"HTML\"><code>&lt;div class=\"speech-bubble\" style=\"border-color: pink; background: pink;\"&gt;\r\n   I like bananas, because they have no bones.\r\n&lt;\/div&gt;<\/code><\/pre>\n<p>Then in our code for the pseudo element, we&#8217;ll specifically have it inherit the color:<\/p>\n<pre rel=\"CSS\"><code>.speech-bubble:after {\r\n   content: \"\";\r\n   position: absolute;\r\n   top: 100%;\r\n   left: 20px;\r\n   border-top: 20px solid black;\r\n   border-top-color: inherit; \r\n   border-left: 20px solid transparent;\r\n   border-right: 20px solid transparent; \r\n}<\/code><\/pre>\n<p>Notice that I&#8217;ve applied <code>inherit<\/code> to <code>border-top-color<\/code> rather than the shorthand property <code>border-top<\/code>. For some reason (feel free to enlighten me) <code>inherit<\/code> doesn&#8217;t work in the shorthand. Also note that when you override the the color with <code>inherit<\/code>, it doesn&#8217;t &#8220;inherit&#8221; from the color set just above it (black), it inherits from its parent. So if you need a default, you&#8217;ll need to set the <code>border-color<\/code> on the parent.<\/p>\n<p><a href=\"http:\/\/jsfiddle.net\/chriscoyier\/taaGc\/1\/\" class=\"button\" rel=\"noopener\">View Demo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Interesting question: css3 speech bubble question: for the &#8220;triangle&#8221;&#8216;s border color, how can I set it to whatever its parent div&#8217;s bgcolor is automagically? &mdash; Jin Yang (@jzy) February 1, 2012<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/16193"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=16193"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/16193\/revisions"}],"predecessor-version":[{"id":16236,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/16193\/revisions\/16236"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=16193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=16193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=16193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}