網站的45度角分離背景顏色

任何人都可以告訴我爲響應式網站獲得像這樣的縮放分割背景效果的最佳方式。在HTML5和CSS3中使用： Example background effect 網站的45度角分離背景顏色

我已經嘗試了一個漸變，但得到一個鋸齒狀的邊緣，並希望任何想法之前，我太深入到另一種方法。理想情況下必須回到IE9。

謝謝

2015-02-07 the_pgb

退房（HTTP [CSS-技巧就如何創建三角形教程]： // css-tricks.com/snippets/css/css-triangle/）。我相信這是對某些情況的有效解決方案，因爲您可以創建多個三角形並更改其顏色。您也可以使用一種顏色創建一個容器，然後用另一種顏色在其上方放置一個三角形。這樣你只能創建一個三角形，但應該得到想要的效果。 – Shahar 2015-02-08 12:17:15

@Shahar：是的，我嘗試過這樣的事情，但是在屏幕變小時讓三角形與其餘內容成比例的問題。我會再看看它。 – 2015-02-11 08:30:59

希望這會有幫助：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; 
}

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(); 
    }); 

});

來源

2015-03-27 21:14:55 zshare

網站的45度角分離背景顏色

回答

相關問題