Speech Bubble Arrows that Inherit Parent Color

Use a pseudo element on a container to add a pointer arrow

By "css3 speech bubble", Jin means using a pseudo element on a container to add a little pointer arrow (triangle). Setting the container with an inline style is all well and good, but unfortunately there is no inline style for pseudo elements. There is a solution though! While we are setting the inline style for the container, we can set an inline style for border-color 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.

Daniela Vaseva

Daniela VasevaDaniela is writing tutorials, news, newsletters, and update emails for the DMXzone specialising in the sphere of electronic processing, analysis and publication of texts, and interested in the development of new Internet technologies and problems related to the cyberculture and net literature. She has a bachelor's degree in Bulgarian philology, and a master's degree in computational linguistics.

See All Postings From Daniela Vaseva >>


Be the first to write a comment

You must me logged in to write a comment.