How can I create this shape using pure CSS3?

Question

I'm having problems recreating this sort of shape using CSS3! This is going to be used as a header that will stretch across the whole site, and the background of it needs to be transparent, so I'm having issues attempting to recreate it!

EDIT: This is what I've got so far, I just can't recreate the curve! https://dl.dropboxusercontent.com/u/33897365/css3/index.html

Current CSS:

body {
    background: #ff00ff;
}

#header { 
    height: 150px;
    width: 100%;
    background: #000;
    border-bottom-right-radius: 35% 90%;
}

Answer 1

I had a hard time trying this using CSS3, so unless somebody else manages to build it, you're going to need an image.

If you would choose to use an image, make sure to make it a PNG. I've taken your image, brought the color down to only 8 colors, which is enough for the anti-aliasing on the edge, and then I compressed it using a PNG crusher. The resulting image is about 1.14KB, which is 1/10th of the size of your jpg image, with the added benefit of having transparency:

But another, option would be SVG. SVG is an xml based vector graphics format. It is supported by all major browsers, except IE8-, but they also don't support the CSS3 features you'll need.

SVG can be loaded from a separate file, but you can also put it in a data-url or even inline it in your page, like this:

<div class="container">
  <svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="960px" height="320px" viewBox="0 0 960 320" enable-background="new 0 0 960 320" xml:space="preserve">
    <path fill="#FF1731" d="M960,47c-167,0-348.331,18-474.673,81.333C388.356,176.943,165.667,200.875,0,200.875V0h960"/>
    </svg>
</div>

See: http://jsfiddle.net/8xJXr/ (Yeah, I made it red. Just because ;))

So it has the same advantages as CSS: very small, similar browser support... I only had a little trouble making it sizable, but maybe you can find a solution for that, if you need it in the first place.

Extra info:

• Browser support for SVG
• CSS Tricks: Using SVG