Css Clip-path Partial Circles

I am trying to replicate this clipping in css and finding it impossible to get partial cricles and multiple instances of a clip path. Basically I am wanting to get the curved bott

Solution 1:

I don't know, if you can do this with css clip-path property, but you can use background-image as svg vector. Make SVG with rounded sides, and fill property with that background image.

<svgwidth="502"height="162"viewBox="0 0 502 162"fill="none"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><pathd="M501.5 162V0.5C305.81 41.1562 196.035 41.1985 0.5 0.5V162C196.015 122.401 305.709 122.384 501.5 162Z"fill="url(yoururl.svg)"/></svg>

That svg looks like this:

<svgid="svg"viewBox="0 0 502 162"fill="none"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><pathd="M501.5 162V0.5C305.81 41.1562 196.035 41.1985 0.5 0.5V162C196.015 122.401 305.709 122.384 501.5 162Z"fill="green"/></svg>

You can use this <svg>, copy this to new file, replace url attribute on <path> element, change style of the container to this:

background: url(yourfile.svg);
background-size: cover;