Как достичь эффекта карты «вставки резной» внутри контейнера изображения с клип-патом CSS или масками? [закрыто] ⇐ Javascript

[Anonymous]

On-Device Analysis
Smart App





Thumb 1
Thumb 2




< /code>
.gallery-container {
position: relative;
height: 600px;
}

.main-image {
position: absolute;
inset: 0;
border-radius: 3rem;
overflow: hidden;
clip-path: url(#organic-carved-shape);
}

.circuit-bg {
width: 100%;
height: 100%;
object-fit: cover;
}

.gallery-card {
position: absolute;
bottom: 0;
left: 0;
width: 380px;
padding: 1.5rem;
border-radius: 2rem;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(12px);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
< /code>
Current result:
The gallery card simply overlaps the main image.
Expected result:
The gallery card should appear as if it’s part of (or cut into) the main container — following the same organic shape, not just sitting on top.
Question:
What’s the correct way (CSS clip-path, mask, pseudo-elements, or another technique) to make the gallery card look “carved into” the image container?

Подробнее здесь: https://stackoverflow.com/questions/797 ... ontainer-w