Callout box using a triangle notch

At https://drive.google.com/open?id=1CAkkR3K912kFZ_K_SeHKuQ4K2BUpfRZF

Keywords callout box, triangle, notch

See also https://css-tricks.com/snippets/css/css-triangle/

Demo

See the Pen callout notch by 4joma7 (@4joma7) on CodePen.

Description

The general idea is a box with zero width and height. While the notch is built and determined by the width of the box's border.

The notch

• is basically a html box element with width: 0; and height: 0;
• the actual width and height of the notch is determined by the width of the border; where each border (top, right, bottom, and left) is defined separately; so you can give different colors and sizes to each border
• The borders to the left and right of the notch are given a transparent color
• The border opposite to the notch's direction is given a width of 0

As an example for an up notch, the bottom border is colored while the left and right are transparent. The top border's width is set to 0, all of which form the visual of a notch

width: 0;
height: 0;
border-bottom: 10px solid #eef4f9;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 0;

Class notch is positioned absolutely, relative to class callout. The note about the <b> usage is

I like to reserve elements like “b”, “u”, “s”, and “i” for special, non-text content, design cases like this one, which makes them stand out more easily in code and it’s also less characters to write.

<div class="callout">
    This is a callout box!
    <b class="notch"></b>
</div>