instead of a curve or circle. the span in my example would be the SVG text. and it should cut the div at that position
`
* {
padding:0;
margin:0;
box-sizing:border-box;
}
body {
padding:6rem;
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position:0 0, 0 10px, 10px -10px, -10px 0px;
}
div {
position:relative;
width:600px;
height:300px;
background:#c8c8c8;
border:5px solid #bbb;
border-radius:20px;
filter:
drop-shadow(0 1px 1px hsl(var(--shadow-color, 0deg 0% 0%) / 0.075))
drop-shadow(0 2px 2px hsl(var(--shadow-color, 0deg 0% 0%) / 0.075))
drop-shadow(0 4px 4px hsl(var(--shadow-color, 0deg 0% 0%) / 0.075))
drop-shadow(0 8px 8px hsl(var(--shadow-color, 0deg 0% 0%) / 0.075))
drop-shadow(0 16px 16px hsl(var(--shadow-color, 0deg 0% 0%) / 0.075));
}
span {
position:absolute;
top:-60px;
right:50px;
font-size:140px;
font-weight:bold;
color:red;
}
/*I've tried using clip-path and background-clip but I'm not getting the desired result*/<div>
<span>289</span>
</div>`
CodePudding user response：
Here is a container with a gradient red to yellow and an SVG containing <clipPath> tag. Actually this tag makes the mask.
.container {
background-image: linear-gradient(red, yellow);
clip-path: url(#myClip);
height:300px;
width:100%;
}<div class="container"></div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<g>
<clipPath id="myClip">
<path fill="#EC008C" d="M54.325,138.727h-40.8c1.68-4.398,4.759-9.339,9.24-14.819c4.479-5.479,8.56-10.399,12.24-14.761
c3.679-4.359,6.759-8.958,9.24-13.799c2.479-4.839,3.72-9.979,3.72-15.42c0-3.12-0.3-5.82-0.9-8.1c-0.6-2.28-1.421-4.099-2.46-5.46
c-1.041-1.359-2.241-2.379-3.6-3.06c-1.361-0.679-2.88-1.02-4.56-1.02c-2.88,0-5.241,1.121-7.08,3.36
c-1.841,2.241-2.841,4.881-3,7.92c0.48,2.801,1.119,4.92,1.92,6.36c0.799,1.44,2.359,2.28,4.68,2.52
c0.24-0.079,0.699-0.24,1.38-0.48c0.679-0.24,1.32-0.439,1.92-0.6c0.6-0.16,1.06-0.24,1.38-0.24c0.799,0,1.2,0.681,1.2,2.04
c0,2.4-1.2,4.44-3.6,6.12s-4.961,2.601-7.68,2.76c-7.521-0.48-11.721-5.16-12.6-14.04c0.319-6.399,3.039-11.439,8.16-15.12
c5.119-3.679,10.999-5.52,17.64-5.52c6.799,0,12.619,1.901,17.46,5.7c4.839,3.801,7.5,8.94,7.98,15.42
c0.559,6.48-0.701,11.682-3.78,15.6c-3.081,3.921-8.48,8.802-16.2,14.64c-7.721,5.842-13.46,10.92-17.22,15.24h25.32l11.52-0.48
l-4.56,22.08h-3.96l0.24-4.439c0-0.96-0.201-1.602-0.6-1.92C56.564,138.887,55.685,138.727,54.325,138.727z"/>
<path fill="#EC008C" d="M91.764,100.567c-8.88-5.199-13.481-12.318-13.8-21.36c0.24-2.56,0.559-4.519,0.96-5.88
c1.519-4.959,4.5-8.82,8.939-11.58c4.44-2.76,9.42-4.219,14.941-4.38c7.277-0.079,13.238,1.68,17.879,5.28
c4.639,3.6,6.961,7.961,6.961,13.08c-0.24,7.041-4.641,12.641-13.201,16.8c10.16,5.28,15.24,13.122,15.24,23.52
c0,4.881-1.379,9.18-4.139,12.9c-2.762,3.72-6.322,6.561-10.682,8.52c-4.361,1.959-9.02,2.859-13.979,2.7
c-7.92-0.239-14.262-2.419-19.021-6.54c-4.76-4.119-6.94-9.3-6.54-15.54C75.883,110.488,81.364,104.646,91.764,100.567z
M96.205,102.848c-5.441,4.24-8.16,9.959-8.16,17.159c-0.161,4.161,1.158,7.781,3.96,10.86c2.799,3.08,6.72,4.619,11.759,4.619
c4,0,7.34-1.338,10.02-4.02c2.68-2.68,4.021-5.82,4.021-9.42c0-2.64-0.682-5.02-2.041-7.14c-1.361-2.119-3.102-3.88-5.219-5.28
c-2.121-1.398-4.361-2.619-6.721-3.66C101.463,104.928,98.923,103.888,96.205,102.848z M95.004,64.207
c-3.12,1.841-4.842,4.881-5.16,9.12c0.318,2.96,1.519,5.46,3.6,7.5c2.08,2.04,4.72,3.821,7.919,5.34
c3.199,1.521,6.16,2.88,8.881,4.08c3.439-2.88,5.16-7.2,5.16-12.96c0-2.479-0.541-4.92-1.621-7.32
c-1.078-2.4-2.68-4.279-4.799-5.64c-2.121-1.359-4.5-2.04-7.141-2.04C99.364,62.287,97.083,62.928,95.004,64.207z"/>
<path fill="#EC008C" d="M173.842,105.727c-3.359,3.201-7.879,4.92-13.559,5.16c-2.881-0.318-4.842-0.639-5.881-0.959
c-5.279-1.359-9.299-4.24-12.061-8.641c-2.76-4.399-4.221-9.439-4.379-15.12c-0.08-4.479,0.939-8.958,3.061-13.44
c2.117-4.479,5.178-8.119,9.18-10.92c3.998-2.799,8.598-4.2,13.799-4.2c9.199,0,16.021,3.521,20.461,10.56
c4.439,7.041,6.66,16.401,6.66,28.08c0,11.601-2.58,21.86-7.74,30.78c-5.16,8.921-13.182,13.381-24.061,13.381
c-4.4,0-8.301-0.883-11.699-2.641c-3.402-1.76-5.381-4.48-5.941-8.16c0.16-1.92,0.842-3.541,2.041-4.86s2.719-1.979,4.561-1.979
c2.078,0,3.617,0.521,4.619,1.56c1,1.04,2.059,2.7,3.18,4.979c1.119,2.28,2.059,3.861,2.82,4.74c0.76,0.881,1.98,1.439,3.66,1.68
c0.318-0.158,0.721-0.24,1.199-0.24c2.801-0.239,4.92-2.039,6.361-5.399C172.201,125.607,173.441,117.486,173.842,105.727z
M164.002,104.047c2,0.08,3.881-0.42,5.641-1.5c1.758-1.08,3.16-2.619,4.199-4.62v-17.52c-0.16-5.28-1-9.64-2.52-13.08
c-1.52-3.439-3.881-5.119-7.08-5.04c-2.879,0.081-4.961,1.32-6.24,3.72c-1.279,2.4-2.039,5.04-2.279,7.92
c-0.24,2.88-0.359,6.041-0.359,9.48C155.041,97.008,157.922,103.888,164.002,104.047z"/>
</clipPath>
</g>
</svg>CodePudding user response：
Just a tiny addition to Azu's working example code:
In chromium the counter shape inside the nine wont't "cut out".
Pretty sure it is a path direction issue (ideally outer shapes are defined by a clockwise coordinate order – counter shapes use a counter-clockwise direction).
You could replace it with this path:
<path id="nine" fill="#EC008C" d="M184.5,68.2c-4.4-7-11.3-10.6-20.5-10.6c-5.2,0-9.8,1.4-13.8,4.2c-4,2.8-7.101,6.4-9.2,10.9
s-3.1,9-3.1,13.4c0.199,5.7,1.6,10.7,4.399,15.1c2.8,4.399,6.8,7.3,12.101,8.6c1,0.3,3,0.601,5.899,1c5.7-0.2,10.2-2,13.601-5.2
c-0.4,11.801-1.601,19.9-3.7,24.4c-1.4,3.4-3.601,5.2-6.4,5.4c-0.5,0-0.899,0.1-1.2,0.199c-1.699-0.199-2.899-0.8-3.699-1.699
c-0.801-0.9-1.7-2.5-2.801-4.7c-1.1-2.3-2.199-3.9-3.199-5c-1-1-2.5-1.601-4.601-1.601c-1.8,0-3.399,0.7-4.6,2
c-1.2,1.301-1.9,2.9-2,4.9c0.6,3.7,2.5,6.4,5.899,8.2c3.4,1.8,7.301,2.6,11.7,2.6c10.9,0,18.9-4.5,24.101-13.399
c5.199-8.9,7.699-19.2,7.699-30.8C191.1,84.6,188.9,75.2,184.5,68.2z M173.8,97.9c-1,2-2.399,3.5-4.2,4.6c-1.8,1.1-3.6,1.6-5.6,1.5
c-6.1-0.2-9-7-8.6-20.6c0-3.4,0.1-6.6,0.399-9.5c0.2-2.9,1-5.5,2.3-7.9c1.301-2.4,3.4-3.6,6.2-3.7c3.2-0.1,5.601,1.6,7.101,5
c1.5,3.4,2.399,7.8,2.5,13.1v17.5H173.8z"/>
Be careful about mixing up the terms mask and clipping-path since both methods exist both in css and in svg.
But they work quite differently and are also differently well supported by browsers.