CSS傾斜的背景（不是全寬/有點不同）

Question

我做了一個簡單的網站設計，現在我想練習我的編碼技能，使它活着。但看起來我有點新手。

This就是我要完成的背景和大量的研究後，this是最好的，我可以得到（失望）..

現在的問題..是有可能與純CSS去發展它？ （並且很少有推薦可能？）

任何有用的答案將不勝感激！

謝謝！

編輯：這裏是代碼。 （對不起，忘了）

HTML

<section id="hero"> 
    <div class="bg"></div> 
</section> 

CSS

#hero .bg { 
    background: #8c57d1; /* Old browsers */ 
    background: -moz-linear-gradient(-45deg, #8c57d1 0%, #1090cb 43%, #1046d1 100%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(-45deg, #8c57d1 0%,#1090cb 43%,#1046d1 100%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(135deg, #8c57d1 0%,#1090cb 43%,#1046d1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    width: 90%; 
    position: absolute; 
    box-sizing: border-box; 
    border-bottom-right-radius: 200px; 
    padding: 55vh 0px; 
} 

#hero .bg:after { 
    content: ""; 
    bottom: 0; 
    position: absolute; 
    left: 0; 
    height: 0; 
    width: 0; 
    border-color: transparent transparent #FFFFFF transparent; 
    border-style: solid; 
    border-width: 0 0 20vw 90vw; 
} 

Answer 1

這是最接近我能得到的形象。我希望這有幫助。

#hero .bg { 
 
    background: #8c57d1; /* Old browsers */ 
 
    background: -moz-linear-gradient(135deg, #8c57d1 20%, #1090cb 43%, #1046d1 100%); /* FF3.6-15 */ 
 
    background: -webkit-linear-gradient(135deg, #8c57d1 20%,#1090cb 43%,#1046d1 100%); /* Chrome10-25,Safari5.1-6 */ 
 
    background: linear-gradient(135deg, #8c57d1 20%,#1090cb 43%,#1046d1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    width: 90%; 
 
    position: absolute; 
 
    left:-60px; 
 
    top:-10px; 
 
    box-sizing: border-box; 
 
    border-bottom-right-radius: 20px; 
 
    padding: 50vh 0px; 
 
    -ms-transform: skew(-10deg,0deg); 
 
    -webkit-transform: skew(-10deg,0deg); 
 
    transform: skew(-10deg,0deg); 
 
} 
 

 
#hero .bg:after { 
 
    content: ""; 
 
    bottom: 0; 
 
    position: absolute; 
 
    left: 0; 
 
    height: 0; 
 
    width: 0; 
 
    border-color: transparent transparent #FFFFFF transparent; 
 
    border-style: solid; 
 
    border-width: 0 0 15vw 100vw; 
 
} 
 
\t

<section id="hero"> 
 
    <div class="bg"></div> 
 
</section>

下面是另一個：

#hero .bg { 
 
    background: #8c57d1; 
 
    /* Old browsers */ 
 
    background: -moz-linear-gradient(135deg, #8c57d1 20%, #1090cb 43%, #1046d1 100%); 
 
    /* FF3.6-15 */ 
 
    background: -webkit-linear-gradient(135deg, #8c57d1 20%, #1090cb 43%, #1046d1 100%); 
 
    /* Chrome10-25,Safari5.1-6 */ 
 
    background: linear-gradient(135deg, #8c57d1 20%, #1090cb 43%, #1046d1 100%); 
 
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    width: 95%; 
 
    position: absolute; 
 
    left: -60px; 
 
    top: -100px; 
 
    box-sizing: border-box; 
 
    border-bottom-right-radius: 20px; 
 
    padding: 50vh 0px; 
 
    -ms-transform: skew(-10deg, 0deg); 
 
    -webkit-transform: skew(-10deg, 0deg); 
 
    transform: skew(-10deg, -9deg); 
 
}

<section id="hero"> 
 
    <div class="bg"></div> 
 
</section>