CSS斜めの背景（全幅ではない/少し違う）

Question

私はシンプルなウェブサイトデザインを行っています。今はコーディングスキルを練習して生き生きとさせたいと思います。しかし、私は少し初心者のようです。

This私が達成したいと多くの研究の後、thisは私が（がっかり）得ることができる最高である背景..です

さて、質問は...平野CSSでそれを開発することが可能です？ （ほんの少しのおすすめ？）

何か有益な答えがあります。

ありがとうございます！

EDIT：ここにコードがあります。 （申し訳ありませんが、それについて忘れてしまった）

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>