full width wave in CSS, SVG

331
May 05, 2018, at 6:28 PM

I am building a website, it has a part that is in wave form, like this: PSD

I am currently using the PSD image, a PNG, to put on the site, but I would like the wave to have full width of the screen, my result

I would like a CSS solution, so I researched a bit, and talez is possible using SVG, however I do not I succeeded in creating

<svg viewbox="0 0 100 25"> 
  <path fill="#9EAFFD" d="M0 30 V12 Q30 17 55 12 T100 11 V30z" /> 
</svg>

This code I got on the internet, but I could not do what I need, 4 waves overlapping, I do not know about SVG, anyone?

Answer 1

In your snippet we're seeing the browser's default margin.

On the page we're seeing that the SVG is a different aspect ratio to its container. You can either make the container taller or allow the shape to distort into the existing container. preserveAspectRatio="none" would allow distortion.

body { 
  margin: 0; 
}
<svg viewbox="0 0 100 25" preserveAspectRatio="none"> 
  <path fill="#9EAFFD" d="M0 30 V12 Q30 17 55 12 T100 11 V30z" /> 
</svg>

Rent Charter Buses Company
READ ALSO
How to set border-spacing=0

How to set border-spacing=0

I have to set border-spacing:0 with border:0 in CSS of table

208
asp:TextBox not cooperating with javascript

asp:TextBox not cooperating with javascript

I am trying to fill TextBox on event of two buttons

154
Remove border around JavaFX ScrollPane scroll bar when *not* focused

Remove border around JavaFX ScrollPane scroll bar when *not* focused

I have a strange issueI've styled the scroll-bar of my ScrollPane in JavaFX using CSS, but now every time the ScrollPane is in focus, the border disappears

348
Stop auto image smoothing inside an SVGZ

Stop auto image smoothing inside an SVGZ

I'm using SVGZ images on HTML pages for their resizabilityThese SVGZ images contain PNGs that have been enlarged in specific ways that I want to preserve, pixelation and all

165