<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: ''
		}
	}
}
View Compiled

External CSS

  1. https://codepen.io/thebabydino/pen/evPbxv.scss

External JavaScript

  1. https://codepen.io/thebabydino/pen/evPbxv.js