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>