Mahdi Mahdi - 3 months ago 15
CSS Question

How is designing shape similar to waves with html and css?

i need to help for design a shape for footer in project similar to this image. please help me.
How is designing shape similar to waves with html and css. with border-radius is possible or with SVG?

Is it possible to be responsive?

my svg code:

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="100%" height="200px" viewBox="0 0 1366 432"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,432.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M0 1710 l0 -1710 10000 0 10000 0 0 114 0 113 -127 100 c-833 653
-1848 1155 -2883 1427 -681 179 -1808 322 -3055 388 -328 18 -1972 18 -2340 0
-1091 -51 -1781 -111 -3645 -317 -1898 -209 -2407 -249 -3230 -249 -682 -1
-1004 26 -1490 125 -1101 225 -2207 812 -2996 1590 l-131 129 -51 0 -52 0 0
-1710z"/>
</g>
</svg>


but it not fullwith. try it

Answer

Update your SVG file. Change:

preserveAspectRatio="xMidYMid meet"

to

preserveAspectRatio="none"