CODEWITHSUNDEEP
htmlcss
Myykro
Myykro

Reputation: 189

Div with contoured edge based on image?

I'm trying to make a div with an edge that contours to the outline of an image on one side. Like this: enter image description here

With the outlined are being the div. The closest solution I could find is here: Curved DIV Edges in CSS But that's not quite it. I'm really just trying to determine if it's even possible or if I should pursue other avenues.

Upvotes: 1

Views: 45

Answers (2)

Myykro
Myykro

Reputation: 189

The answer posted by @tstrmn got me most of the way there but I wanted to post the rest of what I did in the interest of completion. After applying an SVG clip-path to the image, I set the image to position:absolute, set the parent div overflow to visible and translated the image over the left edge of the div. With the clip-path in place on the image this produced the desired result.

Upvotes: 0

tstrmn
tstrmn

Reputation: 351

My best idea would be to create an svg that contains the path of the image line you outlined in your picture and working with clip-path or mask. More on those options here: css-tricks.com/clipping-masking-css

Upvotes: 1

Related Questions