Skip to main content
CSS Tip

A Tooltip Shape using 2 CSS properties

The smallest code to create a simple Tooltip Shape

A CSS-only tooltip shape

.tooltip {
/* triangle dimension */
--b: 2em; /* base */
--h: 1em; /* height*/

border-image: fill 0//var(--h)
conic-gradient(#CC333F 0 0); /* the color */
clip-path:
polygon(0 100%,0 0,100% 0,100% 100%,
calc(50% + var(--b)/2) 100%,
50% calc(100% + var(--h)),
calc(50% - var(--b)/2) 100%);
}

See the Pen A simple Tooltip using 2 CSS properties by Temani Afif (@t_afif) on CodePen.