Search code examples
htmlcsspathcurveclip

Clip Path option for round curves?

I'm struggle with a design problem. The client did make a curve in his head-image https://www.dropbox.com/s/9qkz0aa05st5nz5/Screenshot%202018-08-21%2018.47.36.png?dl=0 and I want to make this possible in css.

I have tried clip-path but they wont offer a round curve like in the example. Do you know how I can handle it properly?

Thank you in advance!

Solution

  • I would use Path2D and .curveTo to achieve this. You'd be ready in about 4 lines of code.