I often want to add an arrow below a <div> with a border to make it look like a chat bubble.

After exploring many solutions, the easiest way I’ve found of adding the arrow is an SVG, positioned absolutely.

Here’s the SVG:

<svg viewBox="0 0 339 339" xmlns="http://www.w3.org/2000/svg">
    <path d="M1002.9 380.95H695.95V687.9l306.95-306.95Z" style="fill:#fff" transform="translate(-679.95 -364.95)"/>
    <path d="M695.95 380.95h306.95" style="fill:none;stroke:#fff;stroke-width:2px" transform="translate(-679.95 -364.95)"/>
    <path d="M1002.9 380.95 695.95 687.9V380.95" style="fill:none;stroke:currentColor;stroke-width:2px" transform="translate(-679.95 -364.95)"/>
</svg>

The <SVG> has a white top border that will mostly overlap the border of the “bubble”. Applying a margin: -1px fixes it. I change the stroke width and color of the other paths to match my border.

The full code for the above example looks like this, with styles inline:

<div style="border: 2px solid black; padding: 1rem; position: relative;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a ornare purus. Ut eu ante odio. Interdum et malesuada fames ac ante ipsum primis in faucibus.
  <svg style="position: absolute; top: 100%; left: 1rem; margin-top: -1px;" viewBox="0 0 339 339" width="1.5em" height="1.5em" xmlns="http://www.w3.org/2000/svg">
    <path d="M1002.9 380.95H695.95V687.9l306.95-306.95Z" style="fill:#fff" transform="translate(-679.95 -364.95)"/>
    <path d="M695.95 380.95h306.95" style="fill:none;stroke:#fff;stroke-width:2em" transform="translate(-679.95 -364.95)"/>
    <path d="M1002.9 380.95 695.95 687.9V380.95" style="fill:none;stroke:currentColor;stroke-width:2em" transform="translate(-679.95 -364.95)"/>
</svg>
</div>