CSS 기울어 진 배경 (전체 너비/조금 다름)

Question

간단한 웹 사이트 디자인을했는데 이제는 코딩 기술을 연습하여 실전에 옮기고 싶습니다. 그러나 나는 조금 초보자 인 것 같다.

This

내가 달성하고자하는 배경과 많은 연구 후에, this는 .. 이제

(실망) 내가 할 수있는 최선이다, 문제는 .. 그것은 일반 CSS와 함께 개발할 수 ? (그리고 아마도 몇 가지 recommandations?)

어떤 도움이되는 대답을 부탁드립니다!

감사합니다.

편집 : 코드는 다음과 같습니다.

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>