Little idea to start this?

Hello everyone, I am a beginner as a junior dev, here I have a design that I would like to make, I would like a part to have a form of folder and currently I have tried several ways on codepen but none It's effective and I admit that this design is giving me a hard time. Do you have any idea where I could start? A big thank you to you.

curiousmissfox•12/21/23, 12:53 PM

What have you tried ? Clip-path or possibly bg image with clip mask comes to mind

J0K3RYOP•12/21/23, 1:01 PM

J'ai essayer de partir de cette vidéo mais a mon niveau actuel ceci est compliquer
https://www.youtube.com/watch?v=khjVPkO35F0

YouTubeKevin Powell

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://twi...

capt_uhu•12/21/23, 1:08 PM

did something similar to this a couple of days ago maybe you can use it as a starting point: https://codepen.io/jsnkuhn/pen/BaMXaOg

CodePenJason Kuhn

BaMXaOg

...

Ccuriousmissfox What have you tried ? Clip-path or possibly bg image with clip mask comes to min...

glutonium•12/21/23, 1:20 PM

i always feel like these might be easier to do with sn svg for the cut and masking
but i never managed to wrap my head around masking ;-;

JJ0K3RY J'ai essayer de partir de cette vidéo mais a mon niveau actuel ceci est compliqu...

Jochem•12/21/23, 1:22 PM

it's best to keep responses in English. We've got a few Francophones on the server, but most people don't speak French

Jochem•12/21/23, 1:24 PM

Cubiq's been working on somewhat similar stuff https://discord.com/channels/436251713830125568/448294302053957632/1186018784180445214 and front-endSTILL NOT SOLVED: Inline svg mask not resizing?

capt_uhu•12/21/23, 1:25 PM

lots of folks seem to be suggesting clipping/masking for these things. Please remember that clipping and masking are not just for creating shapes they are for clipping elements to those shapes. It would be easy to accidentally chop entire elements out of the design with clipping/masking.

Ccapt_uhu lots of folks seem to be suggesting clipping/masking for these things. Please re...

curiousmissfox•12/21/23, 1:31 PM

What do you mean clipping elements TO those shapes?

curiousmissfox•12/21/23, 1:31 PM

Shape-outside can help too.

J0K3RYOP•12/21/23, 6:36 PM

first of all sorry for the answer in French I had copied the wrong translation, I thank you for your opinions and your answers I will try to start with jsn's answer and see if I can do this form because it gave me looks really complex to achieve if you have easier methods, I would gladly listen to you

capt_uhu•12/22/23, 2:56 PM

probably worth confirming for the OP that this is not really a beginner friendly design. But it does seem to be a design that's cropping up more and more this year. Also gave this a second try to simplify a bit more with some fake content and a slightly different approach: https://codepen.io/jsnkuhn/pen/PoLowgo?editors=1100

CodePenJason Kuhn

PoLowgo

...

capt_uhu•12/22/23, 2:58 PM

Unless i'm missing something: only has an effect on the placement of element text so i'm not sure how it would be useful here.

Jochem•12/22/23, 3:34 PM

this is not really a beginner friendly design

Definitely this, yeah

Ccapt_uhu probably worth confirming for the OP that this is not really a beginner friendly...

J0K3RYOP•12/22/23, 9:50 PM

Thank you for your help, I have tried several methods to make the shape in css but each time it is the rounded curves that give me a problem. I start with a rectangle then I also use a triangle and rounded corners but that does not work at all I am completely overwhelmed by this design and I confirm that it is not for a beginner, here are the different designs that I have to do on mobile and desktop and moreover I should re-use this shape on several cards as shown below so I am completely overwhelmed at the moment

JJ0K3RY Thank you for your help, I have tried several methods to make the shape in css b...

curiousmissfox•12/23/23, 12:19 AM

Can you share your code?

Ccuriousmissfox Can you share your code?

J0K3RYOP•12/23/23, 1:05 AM

yes here it is very bad and useless, I can't start from that and I have no idea I watch lots of videos but in the end I can't get the right result it becomes frustrating

J0K3RYOP•12/23/23, 1:05 AM

https://codepen.io/J0K3RY-03/pen/ZEPEEGP

CodePenJ0K3RY

Inverted border radius, the hard way

...

J0K3RYOP•12/23/23, 1:27 AM

the best I have

J0K3RYOP•12/23/23, 1:27 AM

https://codepen.io/J0K3RY-03/pen/dyryKpr

CodePenJ0K3RY

radius inverted

...

J0K3RYOP•12/23/23, 1:28 AM

but I still don't have this curve on the left

curiousmissfox•12/23/23, 2:21 AM

heres an example with a clipPatjh

curiousmissfox•12/23/23, 2:21 AM

https://codepen.io/Miss-Fox/pen/JjzjZKm?editors=1100

CodePenMiss Fox

Inverted border radius, the hard way

...

J0K3RYOP•12/23/23, 5:18 PM

In reality I'm looking to make the big rectangle on top around it. I would use the container of the element with a border-radius. I'm still looking to make this curve on the left and a friend told me that it would be easier to do. do it in svg but as I have to reuse this element everywhere with transparency I know if the svg is a good idea. this left curve is complicated.

Jochem•12/23/23, 5:21 PM

yeah, that slanted bit on the tab pretty much requires an SVG (or svg based CSS solution like clip path or whatever)

J0K3RYOP•12/23/23, 5:43 PM

My friend made this for me, can it be used in my case since I will have to reuse it several times on other elements which will be transparent, if I use masks in css I could use it matter where?

forme_pour_contact_1.svg655B

Jochem•12/23/23, 5:50 PM

I haven't used SVGs enough recently to be current on the syntax, so I'll leave answering tha tone to one of the others in here

JJ0K3RY In reality I'm looking to make the big rectangle on top around it. I would use t...

curiousmissfox•12/23/23, 5:57 PM

This is a pseudo element ontop around it instead of a clipPath on the white container. But okay good luck!

Ccuriousmissfox This is a pseudo element ontop around it instead of a clipPath on the white cont...

J0K3RYOP•12/23/23, 6:46 PM

I try to use the easiest method because it's the first time I'm confronted with a design like this and I can't do it and it frustrates me even the svg I can't use it because at the moment to resize it it doesn't fit I'm totally confused now.

curiousmissfox•12/23/23, 7:25 PM

SVGs can be rough to work with

cubiq•12/23/23, 8:45 PM

i took this as a challenge a few days ago and wanted to find about as many ways on how to create such "meta-shape" effect. what i found out is that it really depends on the application and whether it is really important or not, each method has its pros and cons. the most reliable is using the gradient applied on the pseudo element, ive reverse engineered the way how daisyui made it and used it for my little card.
https://daisyui.com/components/tab/#sizes
https://codepen.io/thecubiq/full/xxMaGqK
the problem of this method is that you cannot use it if you want to apply backdrop filter on that shape. in my case, blur so that the card was this glassmorphism-ish.
that was the time when i went for custom svg shape way:
https://codepen.io/thecubiq/pen/abXPvGz
the effect is there and the compatibility is somewhat still fine. im not so sure about safari as their support for inline svgs is still weird. the most flexible way is using either svg mask or svg clip path. last but not least, the css filter as to apply filter blur on the main elements and then contrast on the parent element to once again create this gooey meta effect, that's also a way.

svg goo filter:
https://codepen.io/thecubiq/pen/NWoEJyz
(responsive, breaks when backdrop blur)

css filter:
https://codepen.io/thecubiq/pen/abXQgNg
(responsive, mix blend mode has to be applied so can be messy, no backdrop blur either)

gradient pseudoelement:
https://codepen.io/thecubiq/pen/WNPLbwW
(great crossbrowser support, no background blur, harder to setup, reliable, unresponsive however)

inline svg static clipmask:
https://codepen.io/thecubiq/pen/abXPvGz
(great one, poor support, no responsive)

svg pattern mask:
https://codepen.io/thecubiq/pen/eYxwzZz
(poor support, limited responsiveness)

svg filter mask:
https://codepen.io/thecubiq/pen/qBgzyrP

but my most favorite is using responsive svg filter mask:
https://codepen.io/thecubiq/pen/LYqwRLM
the great feature of this version is that you actually can easily set the corner radius which in my case was basically gamechanger. the support once again for mask-image along with inline svg however is still poor. it is expected to get better support within 2 to 4 months. as it's something that css devs are currently looking into.

check out all the versions. there might be probably more ways so if you find any, make sure to ping me if you find better ones <3 have a great one <3

CodePenCubiq

Glass Morphism 3D Card with BG Video

...

CodePenCubiq

Glass Metaballs at4 | ClipMask

...

CodePenCubiq

Glass Metaballs at1 | SVG Filter

...

CodePenCubiq

Glass Metaballs at2 | CSS Filter

...

Tailwind Tabs Component — Tailwind CSS Components ( version 4 updat...

Tailwind Tabs examples: Tabs can be used to show a list of links in a tabbed format. component

Ccapt_uhu lots of folks seem to be suggesting clipping/masking for these things. Please re...

cubiq•12/23/23, 8:59 PM

just make sure to add some reaponsive padding so that it doesn't affect the functionality lol

curiousmissfox•12/24/23, 1:00 AM

has 94% support and is good in all major browsers, for several versions now. It definitely can be responsive you just have to use the correct values to make it so. (Referred to as inline svg static clip mask in the comment above )