Diagonal Wedge Shaped CSS - Edge to Edge Centered in Browser

Question

I have been trying to make this shape in CSS.

Ideally it will span the entire length of the browser window and probably extend outside the field of view to support larger screens and also be centered so that the angle does not change.

Anyone have any solutions?

Also I think I might run into a problem of the angle aliasing harshly. I might need to resort to using an image. Would like to use CSS though.

** Image Spelling Error. (Indefinitely not Inevitably)

Answer 1

A solution that doesn't require CSS3 support:

jsfiddle demo

HTML

<div class="shape">
    <div class="top"></div>
    <div class="bottom"></div>
</div>

CSS

.shape {
    width:400px;
    margin:0 auto;
}
.top {
    height:0;
    border-width:0 0 150px 400px;
    border-style:solid;
    border-color:transparent #d71f55 #d71f55 transparent;
}
.bottom {
    height: 50px;
    background-color:#d71f55;
}

/* Support transparent border colors in IE6. */
* html .top {
    filter:chroma(color=#123456);
    border-top-color:#123456;
    border-left-color:#123456;
}

Note: You sometimes get excessive antialiasing of the diagonal in some browsers (like an exagerated blur or dropshadow). This trick can be a little unpredictable on modern browsers.