Wie füge ich der Maskenstruktur Rand hinzu? ⇐ CSS

[Anonymous]

Ich versuche eine Form zu erreichen (wie unten). https://css-shape.com/inverted-radius/
Aber das Problem, mit dem ich mit dem Rand aussieht, muss ich meiner Form Rand hinzufügen, die Maske veranlasst, dass der Grenze nicht gezeigt wird. In meinem Fall nicht möglich. Form < /p>

Code: Select all

.inverted-radius {
position:relative;
--r: 20px; /* the radius */
--s: 30px; /* size of inner curve */
--x: 15px; /* horizontal offset (no percentane) */
--y: 10px; /* vertical offset (no percentage) */

width: 450px;
border: 2px solid #00000038;
aspect-ratio: 1.5;
background: white;
border-radius: var(--r);
--_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
--_g:conic-gradient(from 90deg at calc(100% - var(--r)) calc(100% - var(--r)),#0000 25%,#000 0);
--_d:(var(--s) + var(--r));
mask:
calc(100% - var(--_d) - var(--x)) 100% var(--_m),
100% calc(100% - var(--_d) - var(--y)) var(--_m),
radial-gradient(var(--s) at 100% 100%,#0000 99%,#000 calc(100% + 1px))
calc(-1*var(--r) - var(--x)) calc(-1*var(--r) - var(--y)),
var(--_g) calc(-1*var(--_d) - var(--x)) 0,
var(--_g) 0 calc(-1*var(--_d) - var(--y));
mask-repeat: no-repeat;
}
< /code>
Ich habe versucht, Masken-Border oder einen Gradienten hinzuzufügen, aber das funktioniert nicht.body {
background-color: lightblue;
}

.parent {
position: relative;
width: 450px;
}

.inverted-radius {
position: relative;
--r: 20px;
/* the radius */
--s: 30px;
/* size of inner curve */
--x: 15px;
/* horizontal offset (no percentane) */
--y: 10px;
/* vertical offset (no percentage) */

width: 450px;
border: 2px solid #00000038;
aspect-ratio: 1.5;
background: white;
border-radius: var(--r);
--_m: /calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%, #0000 72%);
--_g: conic-gradient(from 90deg at calc(100% - var(--r)) calc(100% - var(--r)), #0000 25%, #000 0);
--_d: (var(--s) + var(--r));
mask:
calc(100% - var(--_d) - var(--x)) 100% var(--_m),
100% calc(100% - var(--_d) - var(--y)) var(--_m),
radial-gradient(var(--s) at 100% 100%, #0000 99%, #000 calc(100% + 1px)) calc(-1*var(--r) - var(--x)) calc(-1*var(--r) - var(--y)),
var(--_g) calc(-1*var(--_d) - var(--x)) 0,
var(--_g) 0 calc(-1*var(--_d) - var(--y));
mask-repeat: no-repeat;
mask-border-slice: 10 15 5 7;
mask-border-source: linear-gradient(90deg, #f00, #00f);
}

/* HTML:  */
.plus {
--c: #59DF9B;
position: absolute;
bottom: 0;
right: 6px;
height: 40px;
aspect-ratio: 1;
box-shadow: 0 0 0 35px inset var(--c);
border-image: conic-gradient(var(--c) 0 0) 50%/calc(50% - 15px);
clip-path: circle();
/* remove this if you don't want a rounded shape */
}< /code>




features

This is a paragraph.
This is a paragraph.
This is a paragraph.
This is a paragraph.