I'm looking for a way to realize this in CSS:
I'm looking for the correct approach to do it.
I thought about using clip-path: url(#svg); in CSS but it's quite hard to get it right.
I already have this svg which represents the bottom shape I want:
<svg height="0" width="0" viewbox="0 0 1 1">
<defs>
<clipPath id="wave" clipPathUnits="objectBoundingBox">
<!--<path d="M600,2 L600,42 L302.524213,42 C301.660332,42.0252073 300.818928,42.0252073 300,42 L0,42 L0,2 C133.63289,-1.65889201 206.966223,1.34619028 220,11.0152469 C247.844727,31.671749 274.511393,42 300,42 L302.524213,42 C319.584145,41.5022057 345.409408,31.1739546 380,11.0152469 C395.066732,2.23465585 468.400065,-0.770426432 600,2 Z" id="Combined-Shape" fill="#000000"></path>-->
<path d="M1,0.048192771084337 L1,1.0120481927711 L0.50420702166667,1.0120481927711 C0.50276722,1.0126555975904 0.50136488,1.0126555975904 0.5,1.0120481927711 L0,1.0120481927711 L0,0.048192771084337 C0.22272148333333,-0.039973301445783 0.344943705,0.03243832 0.36666666666667,0.26542763614458 C0.413074545,0.7631746746988 0.45751898833333,1.0120481927711 0.5,1.0120481927711 L0.50420702166667,1.0120481927711 C0.53264024166667,1.0000531493976 0.57568234666667,0.75117962891566 0.63333333333333,0.26542763614458 C0.65844455333333,0.053847128915663 0.780666775,-0.018564492337349 1,0.048192771084337 Z" id="Combined-Shape" fill="#000000"></path>
</clipPath>
</defs>
</svg>
The SVG looks like this:
What approach is the easiest to achieve this?
