<div class='tooltip' contenteditable>100%</div>

@import 'compass/css3';

$c: #130912, #3e1c33, #602749, #b14623, #f6921d;
$pad: .5em;
$rad: 9px;
$arr: .5em;
$ang: 70deg;
$off: $rad/sin(.5*$ang);
$err: 1deg;

body {
  display: grid;
  place-content: center;
  background: repeating-linear-Gradient(-45deg, #ccc 0 2px, #fff 0 7px)
}

.tooltip {
  border: solid $arr transparent;
  padding: 0 $pad;
  min-width: .5em;
  border-radius: calc(#{$rad} + #{$arr});
  background: linear-Gradient(70deg, $c, $c) border-box;
  color: transparent;
  font: 9em/ 1.5 ubuntu mono, consolas, monaco, monospace;
  clip-path: inset(1px round calc(#{$rad} + #{$arr}));
  --mask: 
    var(--text, #{unquote('linear-Gradient(red, red) text, ')})
    linear-Gradient(red, red) border-box, 
    linear-Gradient(red, red) 
      50%/ calc(100% - 2*#{$rad}) calc(100% - 2*#{$rad}) no-repeat padding-box, 
    conic-Gradient(from calc(#{-.5*$ang} - #{$err}) at 50% calc(100% - #{$off}), 
        transparent, 
        red #{$err} calc(#{$ang} + #{$err}), 
        transparent calc(#{$ang} + 2*#{$err})) 
      50% 100%/ 50% 50% no-repeat border-box, 
    radial-Gradient(circle at 50% 0, transparent #{$rad}, red calc(#{$rad} + 1px))
      50% 100%/ #{2*$rad $off} no-repeat border-box, 
    linear-Gradient(red, red) border-box, 
    linear-Gradient(red, red) padding-box, 
    conic-Gradient(from calc(#{-.5*$ang} - #{$err}) at 50% 100%, 
        transparent, 
        red #{$err} calc(#{$ang} + #{$err}), 
        transparent calc(#{$ang} + 2*#{$err})) 
      50% 100%/ 50% 50% no-repeat border-box;
  -webkit-mask: var(--mask);
  -webkit-mask-composite: source-over, xor, source-over, source-over;
  
  @supports not(-webkit-mask-clip: text) {
    position: relative;
    background-clip: text;
    --text: #{unquote(' ')};
    mask: none;
    
    &::after {
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      margin: -$arr;
      border: inherit;
      border-radius: inherit;
      background: inherit;
      background-clip: border-box;
      mask: var(--mask);
      mask-composite: exclude, add, add, add;
      content: ''
    }
  }
}