A callout UI typically has a leader line (or “tail”) with a text box at one end. It is often used as a visual highlight and to add annotations in a casual layout. Let’s look at one way to design a callout like this using CSS offset and borders.
The Layout
The HTML layout consists of an element that represents the callout, inside which is another element that’ll carry the text.
<div class="callout">
<div class="callout-text"><!-- text --></div>
</div>Code language: HTML, XML (xml).callout {
container-type: size;
}Code language: CSS (css)The outer element, .callout, is established as a query container that tracks both its horizontal and vertical sizes (that’s what the value size does as opposed to inline-size). This later gives us the dimensions needed to place the text boxes at the desired positions over .callout. The element will also receive borders later on to create the leader lines.
The Text Box Offset
.callout-text {
offset-path: border-box;
offset-anchor: bottom;
}Code language: CSS (css)The text boxes (.callout-text) are to be placed along the border reference box of .callout. The text box’s bottom-center (center is default) is the point that attaches to the .callout’s border.
The offset-path CSS property defines a track that an element can be placed on and animated along. The offset-anchor CSS property defines a point in that element that connects to the path.
.callout-text {
offset-path: border-box;
offset-anchor: bottom;
offset-distance: 100cqw;
/* shorthand would be:
offset: border-box 100cqw 0deg/bottom; */
}Code language: CSS (css)If the leader line needs to extend from below the text box and towards the left, the text box needs to be at the opposite corner (the top right) of .callout, which is the distance of the entire callout width: 100cqw.
The Leader Line
With the text box positioned, we now add a leader line. This is done by setting the right and bottom borders for .callout.
.callout {
container-type: size;
border: dashed;
border-width: 0 2px 2px 0;
}Code language: CSS (css)A standard callout is ready, but let’s tweak it a little more!
The Designs
One advantage of positioning text boxes using offset is that the text box is now attached to the callout’s border. If the border moves in any way, the text box moves along with it.
To make the leader line slanted, we add skew to .callout. To counter the effect of skew on the text box, it receives the same skew but in the opposite direction.
.callout {
/* etc. */
--ang: 20deg;
transform: skewX(calc(-1 * var(--ang)));
}
.callout-text {
/* etc. */
transform: skewX(var(--ang));
}Code language: CSS (css)Box shadows can also be used to provide leader lines.
.callout {
/* etc. */
box-shadow: 1px -1px 0 1px maroon,
2px -2px 0 2px pink,
3px -3px 0 3px deeppink;
}Code language: CSS (css)We can also take advantage of border-radius and corner-shape to affect the leader line’s shape.
The corner-shape fallback is the default rounded border.
.callout {
/* etc. */
border-bottom-right-radius: 30px;
corner-shape: notch;
}Code language: CSS (css)This can all be animated, too.
.callout {
/* etc. */
--ang: 20deg;
transform: scaleY(0);
transform-origin: bottom left;
}
.callout-text {
/* etc. */
transform: scale(0);
transform-origin: bottom center;
}
p:hover + .callout {
transform: skewX(calc(-1 * var(--ang))) scaleY(1);
transition: transform 0.3s;
}
p:hover + .callout > .callout-text {
transform: scale(1) skewX(var(--ang));
transition: 0.3s transform 0.3s;
}Code language: CSS (css)First, the .callout scales up vertically, followed by the .callout-text scaling up in both axes.
The design variants can be many, arising from different combinations of these. In a nutshell, we use borders and shadows for the leader line’s type and color; use sizing, transforms, border-radius, etc., to change the line’s size and shape. Then style the text box as we would any element showcasing text.
