Learn how to create a callout box or speech bubble using a box and triangle arrow, with shadow effects.

Learn how to create a callout box or speech bubble using a box and triangle arrow, with shadow effects. We see these types of boxes everywhere on the web:

• Popups and tooltips
• Comments and quotes
• Error messages

How to

It’s very straight-forward, we create box, then append a triangle.

<div class="callout">This is a callout box.</div>

.callout {
    position: relative;
    margin: 3em 0;
    padding: 1em;
    box-sizing: border-box;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 5px 0 rgba(0,0,0,.12);
}

.callout::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    margin-left: -.5em;
    bottom: -1em;
    left: 50%;
    box-sizing: border-box;
    border: 0.5em solid #000;
    border-color: transparent transparent #fff #fff;
    transform-origin: 0 0;
    transform: rotate(-45deg);
    box-shadow: -3px 3px 4px 0 rgba(0,0,0,.08);
}

Changing the direction

It’s very easy to extend the stylesheet to adjust the direction of the arrow.

<div class="callout arrow-left">The arrow is displayed on the left.</div>

.callout.arrow-left::after {
    margin-left: -.5em;
    bottom: calc(50% - 0.4em);
    left: 0.5em;
    transform: rotate(45deg);
}