How can I make a full width wave in CSS

html css footer css-shapes
fischgeek picture fischgeek · Jan 5, 2015 · Viewed 10.3k times · Source

I have been tasked with building a website. On this website they have footer in their mockup in the shape of a wave. See image below:

enter image description here

I can probably get away with not having the stroke or yellow line. The main issue is they would like to have this "footer wave" be 100% width. I was thinking there could be a CSS solution to this? Possibly recreating the shape in css? Is this possible?

Answer

Weafs.py picture Weafs.py · Jan 5, 2015

You could use svg.

body {
  margin: 0;
}
footer {
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: 0;
  overflow: hidden;
}
<footer>
  <svg viewBox="0 -20 700 110" width="100%" height="110" preserveAspectRatio="none">
    <path transform="translate(0, -20)" d="M0,10 c80,-22 240,0 350,18 c90,17 260,7.5 350,-20 v50 h-700" fill="#CEB964" />
    <path d="M0,10 c80,-18 230,-12 350,7 c80,13 260,17 350,-5 v100 h-700z" fill="#00273F" />
  </svg>
</footer>

Related questions

Bootstrap 3 Flush footer to bottom. not fixed

I am using Bootstrap 3 for a site I am designing. I want to have a footer like this sample. Sample Please note that I don't want it FIXED so bootstrap navbar-fixed-bottom does not solve my problem. I just want it …

Read More
How to align footer (div) to the bottom of the page?

Can anyone explain how to align a footer div to the bottom of the page. From the examples I've seen, they all show how to make the div stay visible at the bottom, no matter where you've scrolled the page. …

Read More
Fixed footer in Bootstrap

I'm trying out Bootstrap and I was wondering, how I can fix the footer on the bottom without having it disappear from the page if the content is scrolled?

Read More