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.

Answer 2

I've create a extended (and a Sass) version of Matt Coughlins greate answer, I published it in my blog (german) and forked his jsfiddle demo.

HTML

<div class="diagonal-shape bl-to-tr"></div>
<div class="block">Diagonal Shape</div>
<div class="diagonal-shape tr-to-bl"></div>
<br><br><br><br><br>
<div class="diagonal-shape tl-to-br"></div>
<div class="block">block2</div>
<div class="diagonal-shape br-to-tl"></div>

CSS

/**
 * Draw a diagonal shape, e.g. as diagonal segregation
 * 
 * @author: Matt Coughlin, Pascal Garber
 *
 * @param $color: The color of the shape, default #d71f55
 * @param $direction:
 *  bl-to-tr for bottom-left to top right
 *  tr-to-bl for top-right to bottom left
 *  tl-to-br for top-left to bottom right
 *  br-to-tl for bottom-right to top left
 * @param $height: The height of the shape, default 100px
 * @param $width: The width of the shape, default 100vw
 * @param $color: The color of the shape, default #d71f55
 *
 * @see also: http://stackoverflow.com/a/11074735/1465919
 */
.diagonal-shape.bl-to-tr {
  height: 0;
  border-style: solid;
  border-width: 0 0 100px 100vw;
  border-color: transparent #d71f55 #d71f55 transparent;
}
.diagonal-shape.tr-to-bl {
  height: 0;
  border-style: solid;
  border-width: 100px 100vw 0 0;
  border-color: #d71f55 transparent transparent #d71f55;
}
.diagonal-shape.tl-to-br {
  height: 0;
  border-style: solid;
  border-width: 0 100vw 100px 0;
  border-color: transparent transparent #d71f55 #d71f55;
}
.diagonal-shape.br-to-tl {
  height: 0;
  border-style: solid;
  border-width: 100px 0 0 100vw;
  border-color: #d71f55 #d71f55 transparent transparent;
}

.block {
    height: 200px;
    line-height: 200px;
    background-color: #d71f55;
    color: white;
    text-align: center;

}

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

SCSS

/**
 * Draw a diagonal shape, e.g. as diagonal segregation
 * 
 * @author: Matt Coughlin, Pascal Garber
 *
 * @param $color: The color of the shape, default #d71f55
 * @param $direction:
 *  bl-to-tr for bottom-left to top right
 *  tr-to-bl for top-right to bottom left
 *  tl-to-br for top-left to bottom right
 *  br-to-tl for bottom-right to top left
 * @param $height: The height of the shape, default 100px
 * @param $width: The width of the shape, default 100vw
 * @param $color: The color of the shape, default #d71f55
 *
 * @see also: http://stackoverflow.com/a/11074735/1465919
 */
@mixin diagonal-shape($color: #d71f55, $direction: 'bl-to-tr', $height: 100px, $width: 100vw) {
    height: 0;
    border-style: solid;

    @if $direction == 'bl-to-tr' {
        border-width: 0 0 $height $width;
        border-color: transparent $color $color transparent;
    } @else if $direction == 'tr-to-bl' {
        border-width: $height $width 0 0;
        border-color: $color transparent transparent $color;
    } @else if $direction == 'tl-to-br' {
        border-width: 0 $width $height 0;
        border-color: transparent  transparent $color $color;
    } @else if $direction == 'br-to-tl' {
        border-width: $height 0 0 $width;
        border-color: $color $color transparent  transparent ;
    }
}

.diagonal-shape {
    &.bl-to-tr {
        @include diagonal-shape($brand-primary, 'bl-to-tr');
    }
    &.tr-to-bl {
        @include diagonal-shape($brand-primary, 'tr-to-bl');
    }
    &.tl-to-br {
        @include diagonal-shape($brand-primary, 'tl-to-br');
    }
    &.br-to-tl {
        @include diagonal-shape($brand-primary, 'br-to-tl');
    }
}

With the SCSS Mixin you can easily create you own classes:

.your-claas {
    @include diagonal-shape($color, $direction, $height, $width);
}