Speech bubbles with CSS
Speech bubbles have existed in comics for decades, and they are a great way to visually represent dialogue. You can create a similar effect using CSS, by adding a triangle to the top of a content container.
For this task, you'll leverage the ::before
and ::after
pseudo-elements to create two triangles. The colors of the two triangles should be the same as the container's border-color
and the container's background-color
respectively.
The border-width
of the one triangle (::before
) should be 1px
wider than the other one (::after
), in order to act as the border. The smaller triangle (::after
) should be 1px
to the right of the larger triangle (::before
) to allow for its left border to be shown.
And with that, you have a content container with a triangle at the top, much like a speech bubble. You can tweak this effect to also place the triangle at the bottom, left, or right of the container, or even create a different shape altogether.
.container { position: relative; background: #ffffff; border: 1px solid #dddddd; } .container::before, .container::after { content: ''; position: absolute; bottom: 100%; left: 19px; border: 11px solid transparent; border-bottom-color: #dddddd; } .container::after { left: 20px; border: 10px solid transparent; border-bottom-color: #ffffff; }