Wavy shape with css

css css-shapes
stevenspiel picture stevenspiel · Jun 20, 2013 · Viewed 171.1k times · Source

I'm trying to recreate this image with CSS:

wayvy shape

I would not need it to repeat. This is what I started but it just has a straight line:

Answer

ThomasA picture ThomasA · Feb 17, 2014

I think this is the right way to make a shape like you want. By using the SVG possibilities, and an container to keep the shape responsive.

svg {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}
.container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
}
<div class="container">
  <svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
    <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z" style="stroke: none; fill:red;"></path>
  </svg>
</div>

Related questions

How to draw a circle with text in the middle?

I found this example on stackoverflow: Draw Circle using css alone Which is great. But I'd like to know how to modify that example so that I can include text in the middle of the circle? I also found this: …

Read More
Easier way to create circle div than using an image?

I'm wondering if there's an easier way to create circular divs than what I'm doing now. Currently, I am just making an image for each different size, but it's annoying to do this. Is there anyway using CSS to make …

Read More
CSS Progress Circle

I have searched this website to find progress bars, but the ones I have been able to found show animated circles that go to the full 100%. I would like it to stop at certain percentages like in the screenshot below. …

Read More