Substract image with css

hello there any ideas how to implement this to css from figma? im kinda understand how to make top one, but bottm one kinda tricky there's should be a shadow from image, i was thinking about clip-path or mask but im not sure btw price may have mroe numbers so it should be dynamic, and top one as well
<div class="relative rounded-2xl bg-primary-900 p-4">
<p class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center z-10">{{ name }}</p>

<div class="relative aspect-[0.68/1] mt-3 rounded-4xl overflow-hidden">
<NuxtImg class="size-full object-cover drop-shadow-main" :src="'/fs/' + thumbnail?.path" alt="" />

<div class="absolute top-0 left-5 px-6 py-3 bg-primary-900 rounded-b-4xl">
<div class="flex gap-3 items-center">
<!-- @vue-skip -->
<p v-if="status != null">{{ CAT_ENUM.status[status as keyof typeof CAT_ENUM.status] }}</p>

<p>{{ gender }}</p>
</div>
</div>

<div class="absolute bottom-0 right-0 px-6 py-3 bg-primary-900">
<p>${{ price }}</p>
</div>
</div>

<NuxtLink class="mt-4 block" to="">more information</NuxtLink>
</div>
<div class="relative rounded-2xl bg-primary-900 p-4">
<p class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center z-10">{{ name }}</p>

<div class="relative aspect-[0.68/1] mt-3 rounded-4xl overflow-hidden">
<NuxtImg class="size-full object-cover drop-shadow-main" :src="'/fs/' + thumbnail?.path" alt="" />

<div class="absolute top-0 left-5 px-6 py-3 bg-primary-900 rounded-b-4xl">
<div class="flex gap-3 items-center">
<!-- @vue-skip -->
<p v-if="status != null">{{ CAT_ENUM.status[status as keyof typeof CAT_ENUM.status] }}</p>

<p>{{ gender }}</p>
</div>
</div>

<div class="absolute bottom-0 right-0 px-6 py-3 bg-primary-900">
<p>${{ price }}</p>
</div>
</div>

<NuxtLink class="mt-4 block" to="">more information</NuxtLink>
</div>
i've done this so far, thanks for any help!
No description
28 Replies
Patrik
PatrikOP•6d ago
looks like that for now
No description
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•6d ago
Kevin Powell
YouTube
Creating an inverted border-radius with CSS
The other day on Twitter, @FlorinPop pulled me into a conversation, wondering how to create inverted, round corners. Mask-image was probably the easy answer, but after someone in the thread said that making an SVG mask felt like overkill, I had to try and see if I could think of an alternative way! 🔗 Links ✅ The original tweet: https:...
b1mind
b1mind•6d ago
Nice was just about to link that ty
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•6d ago
nice hehe
Patrik
PatrikOP•6d ago
thanks will check this out! looks nice, thanks again Kevin said about mask do you have any examples of how mask should look? and how apply it
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•6d ago
You can use a mask with a gradient to mask out parts. the color that you use in the gradient doesnt matter at all. i always use red because it is short and easy. and for the transparency i just use #0000 because once again, it's short and easy 🙂
No description
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•6d ago
So you can do the same with a radial-gradient
No description
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•6d ago
Or you can do with a linear gradient or whatever you prefer
Patrik
PatrikOP•6d ago
can i use svg file as a mask?
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•6d ago
Yeah you can
Patrik
PatrikOP•6d ago
thanks
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•6d ago
np 🙂
Patrik
PatrikOP•5d ago
No description
Patrik
PatrikOP•5d ago
okay i've done smth similar but i have no idea how to apply shadow to inner corner
<div class="relative grid grid-cols-5 grid-rows-[auto_1fr_auto] gap-4 aspect-[0.68/1] mt-3">
<div class="col-span-full row-span-full">
<NuxtImg class="size-full object-cover drop-shadow-main rounded-tl-xl rounded-tr-4xl rounded-bl-4xl"
:src="'/fs/' + thumbnail?.path" alt="" />
</div>

<div class="relative col-[1/4] row-[1/1] ml-4 px-4 py-3 bg-primary-900 max-w-max rounded-b-4xl z-10
radial-top before:left-0 before:-top-2 before:-translate-x-full before:scale-[-1_1] after:right-0 after:-top-2
after:translate-x-full">
<div class="flex gap-3 items-center">
<p v-if="status != null">{{ CAT_ENUM.status[status as keyof typeof CAT_ENUM.status] }}</p>

<p>{{ gender }}</p>
</div>
</div>

<div class="relative col-[3/-1] row-[3/3] px-4 py-3 bg-primary-900 max-w-max rounded-tl-4xl justify-self-end text-5xl z-10
radial before:left-0 before:rotate-180 before:bottom-0 before:-translate-x-full after:right-0 after:bottom-full after:rotate-180
shadow-main-inset [box-shadow:10px_13px_0_var(--color-primary-900)]">
<p>${{ price }}</p>
</div>
</div>

<style scoped>
.radial-top::before,
.radial-top::after {
position: absolute;
display: block;
--_size: 15px;
width: 20px;
aspect-ratio: 1;
background-image: radial-gradient(circle at 78% 100%,
transparent var(--_size),
var(--color-primary-900, white) calc(var(--_size) + 1px));
/* red calc(var(--_size) + 1px)); */
}

.radial::before,
.radial::after {
position: absolute;
display: block;
--_size: 36px;
width: var(--_size);
aspect-ratio: 1;
background-image: radial-gradient(circle at 100% 100%,
transparent var(--_size),
var(--color-primary-900, white) calc(var(--_size) + 1px));
}
</style>
<div class="relative grid grid-cols-5 grid-rows-[auto_1fr_auto] gap-4 aspect-[0.68/1] mt-3">
<div class="col-span-full row-span-full">
<NuxtImg class="size-full object-cover drop-shadow-main rounded-tl-xl rounded-tr-4xl rounded-bl-4xl"
:src="'/fs/' + thumbnail?.path" alt="" />
</div>

<div class="relative col-[1/4] row-[1/1] ml-4 px-4 py-3 bg-primary-900 max-w-max rounded-b-4xl z-10
radial-top before:left-0 before:-top-2 before:-translate-x-full before:scale-[-1_1] after:right-0 after:-top-2
after:translate-x-full">
<div class="flex gap-3 items-center">
<p v-if="status != null">{{ CAT_ENUM.status[status as keyof typeof CAT_ENUM.status] }}</p>

<p>{{ gender }}</p>
</div>
</div>

<div class="relative col-[3/-1] row-[3/3] px-4 py-3 bg-primary-900 max-w-max rounded-tl-4xl justify-self-end text-5xl z-10
radial before:left-0 before:rotate-180 before:bottom-0 before:-translate-x-full after:right-0 after:bottom-full after:rotate-180
shadow-main-inset [box-shadow:10px_13px_0_var(--color-primary-900)]">
<p>${{ price }}</p>
</div>
</div>

<style scoped>
.radial-top::before,
.radial-top::after {
position: absolute;
display: block;
--_size: 15px;
width: 20px;
aspect-ratio: 1;
background-image: radial-gradient(circle at 78% 100%,
transparent var(--_size),
var(--color-primary-900, white) calc(var(--_size) + 1px));
/* red calc(var(--_size) + 1px)); */
}

.radial::before,
.radial::after {
position: absolute;
display: block;
--_size: 36px;
width: var(--_size);
aspect-ratio: 1;
background-image: radial-gradient(circle at 100% 100%,
transparent var(--_size),
var(--color-primary-900, white) calc(var(--_size) + 1px));
}
</style>
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•5d ago
Yeah adding a shadow/glow effect will definitely be a great challenge. that really wont be easy at all... You could try filter:drop-shadow(0 0 10px red); but i don't think that is going to work... Most likely it will require tons of code to get shadow to work as you want...
Patrik
PatrikOP•5d ago
already done that looks like that i also added shadow to price to hide shadow there but looks ugly and i dont know how to apply inset shadow to price to make it look nice seems like i need svg mask
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•5d ago
Aah, i thought you used box-shadow property @PatrikFrom what i can see by reading your code, it seems like you have used box-shadow as i expected
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•5d ago
You can see difference here
No description
Patrik
PatrikOP•5d ago
yea i know about that) but image are rectangle its not png
Patrik
PatrikOP•5d ago
No description
Patrik
PatrikOP•5d ago
text just overlap image dont substruct it
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•5d ago
Yeah well. i was expecting that it wouldn't work. but always worth giving it a try 🙂
Patrik
PatrikOP•5d ago
perhaps i can use this element as a mask
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•5d ago
Ah alright
Patrik
PatrikOP•5d ago
like give it an id
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•5d ago
Problem is that the mask will mask out everything, even shadow and text and everything
Patrik
PatrikOP•5d ago
oh :c what if add mask to child and apply drop shadow to parent
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•5d ago
It will still be the same behavior. the only thing you could do is to stack elements on top of each other like
<div class="stack">
<div class="mask"></div>
<div class="overlay"></div>
</div>
<div class="stack">
<div class="mask"></div>
<div class="overlay"></div>
</div>
Now you can put the mask on the mask div and put whatever you want on overlay and make the overlap stack on top of mask. that works, and this is the only way

Did you find this page helpful?