웹 사이트의 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(); 
    }); 

});