@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