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.

More Tooltip shapes: css-generators.com/tooltip-speech-bubble

More CSS Tips