45 градусов угол раскол цвет фона для сайта

Question

Может ли кто-нибудь сказать мне лучший способ получить эффект масштабирования раскол фона, как это для отзывчивого сайта. Использование в HTML5 и CSS3:

Я пробовал градиент, но получил зубчатый край и был бы благодарен за любые мысли, прежде чем я углубился в другой метод. В идеале нужно вернуться к IE9.

Благодаря

Answer 1

Надеются, что это помогает: http://codepen.io/ZsharE/pen/VYRPwW!

HTML

<div class="shape"> 
    <div class="top"></div> 
    <div class="shape-content"> 
     <h1>Diagonal background</h1> 
    </div> 
</div> 

CSS

html, body { 
    margin: 0px; 
    padding: 0px; 
} 

.shape { 
    width: 100%; 
    margin:0 auto; 
    position: relative; 
    background: #468d91; 
} 

.shape-content { 
    max-width: 1170px; 
    margin:0 auto; 
    padding: 200px 15px 200px 15px; 
} 

.shape-content h1 { 
    margin: 0px; 
    padding: 0px 15px; 
    z-index: 9; 
    position: relative; 
    color: #ffffff; 
    font-size: 50px; 
    font-family: 'Open Sans', sans-serif; 
    text-align: center; 
    text-shadow: 0px 2px 4px #444444; 
    font-weight: 300; 
} 

.top { 
    position: absolute; 
    top: 0; 
    left: 0; 
    border-style:solid; 
    border-color:transparent transparent #3c888b #3c888b; 
    z-index: 1; 
} 

JS

function angle() { 
    var w = $(window).width(); 
    var h = $(".shape").height(); 
    $('.top').css('border-right-width', w - 3); 
    $('.top').css('border-bottom-width', h - 3); 
} 

$(document).ready(function(){ 

    $(window).bind("load", function(){ 
     angle(); 
    }); 

    $(window).resize(function(){ 
     angle(); 
    }); 

});