A border-only Tooltip using mask

February 08, 2023

Create a border-only Tooltip with a few lines of code

One element
Less than 20 CSS declarations
Support gradient coloration
Support border-radius
Optimized with CSS variables

A border-only tooltip with gradient coloration

.tooltip {
  --r: 30px; /* border radius*/
  --b: 8px;  /* border length */
  --s: 55px; /* arrow size */
  --a: 90deg; /* angle of the arrow */
  --c: linear-gradient(60deg,#E84A5F,#355C7D);
  
  max-width: 410px;
  font-size: 20px;
  padding: calc(var(--r) + var(--b));
  position: relative;
  font-weight: bold;
  font-family: sans-serif;
}
.tooltip::before {
  content: "";
  position: absolute;
  inset: calc(-1*var(--s));
  border-radius: calc(var(--r) + var(--s));
  border: var(--s) solid #0000;
  padding: var(--b);
  background: var(--c) border-box;
  --_m:/100% var(--s) no-repeat conic-gradient(from calc(var(--a)/-2),#000 var(--a),#0000 0),
       linear-gradient(#000 0 0);
  mask: 
    50% calc(100% - var(--b)) var(--_m) content-box, 
    bottom var(--_m) padding-box;
  mask-composite: exclude;
}

See the Pen Border-only Tooltip with a gradient coloration by Temani Afif (@t_afif) on CodePen.