How to achieve this Div shape?

Magic

Posting Freak
Messages
949
Likes
195
#1
Hey,

Is there a way to get a div to be shaped like this through clipping or some other way?



Cheers
 

TesoMayn

Boredom, it vexes me.
Messages
1,325
Likes
1,035
#2
You can do that with transform ( [ To view this link you must register here. ] )

And clip-path ( [ To view this link you must register here. ] )
 

Magic

Posting Freak
Messages
949
Likes
195
#3
You can do that with transform ( [ To view this link you must register here. ] )

And clip-path ( [ To view this link you must register here. ] )
Is it possible to make those curves? I've seen people make shapes and clip paths for rigid shapes but haven't found any code for an example with smooth curves like the image above.
 

Magic

Posting Freak
Messages
949
Likes
195
#5
Is anyone able to pose that question with that picture on stack overflow? I am not allowed to post pictures yet due to my reputation being too low.
 

bigdawg

fight teh power
Messages
3,587
Likes
3,590
#6
How did you create the image? Can you convert it to an SVG? That way you'd accomplish the same as if you were to use CSS, as it would look crisp at any width (which I assume is your goal). You would then just use `background-image` to display it in a `div`.
 

Magic

Posting Freak
Messages
949
Likes
195
#7
How did you create the image? Can you convert it to an SVG? That way you'd accomplish the same as if you were to use CSS, as it would look crisp at any width (which I assume is your goal). You would then just use `background-image` to display it in a `div`.
Good point, I made it using Adobe XD so that might be an option. I'll give it a go.

EDIT: @bigdawg XD allowed me to export it as an SVG and I added it as a background. Cheers for the tip
 
Last edited:

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top