여러 개의 CSS 색상이 포함 된 머리글을 디자인하려고합니다. 색상 만 해당

Question

위 이미지와 다소 비슷한 헤더를 만들려고합니다.

녹색의 다른 음영으로 도형을 추가하고 싶습니다.

내가 인터넷에서 찾을 수있는 것과 주위 해왔다. (이미지는 페인트에 수정)이 함께 결국 :

.container 
    position: relative 
    width: 100% 
    min-height: 100vh 
    margin: 0 auto 
    overflow: hidden 
    background-color: green 
    &::after 
     content: '' 
     position: absolute 
     background-color: #6fbc29 
     padding-bottom: 124.42136% 
     width: 100% 
     bottom: 0 
     left: 0 
     transform: rotate(80deg) 
     transform-origin: left bottom 

https://codepen.io/anon/pen/rGXQaw

내가 싶지 않아 이미지를 배경으로 추가하십시오. 이 코드에 모양을 추가하는 방법을 알 수 없습니다. 내가 그것을 작성하려고해야하는 또 다른 방법이 있습니까?

누군가 도와 드릴 수 있습니까? 당신이 볼 수 있듯이

Answer 1

, 당신은 우리가이 방법으로 그것을 할 수 있도록 4 개 가지 색상이 있습니다

1) 최초의 색이

2) 두 번째 색 테두리 색상이 될 수있는 컨테이너의 배경이 될 것입니다 전 소자

4)을 사용하여 네 번째 : 소자 후

그리고 트릭 그렇게 사용하는 용기

3)을 사용하여 세번째의 나 당신이 원하는 그런 다음 값과 색상을 조정할 수 및 회전을 변환

body { 
 
    overflow: hidden; 
 
} 
 

 
.container { 
 
    background: red; 
 
    height: 100px; 
 
    border-left: 65px solid blue; 
 
    transform: skew(30deg); 
 
    overflow: hidden; 
 
    width: 110%; 
 
    position: relative; 
 
    left: -40px; 
 
} 
 

 
.container:before { 
 
    content: " "; 
 
    position: absolute; 
 
    background: pink; 
 
    width: 500px; 
 
    height: 100px; 
 
    left: -180px; 
 
    transform: skew(60deg); 
 
} 
 

 
.container:after { 
 
    content: " "; 
 
    background: green; 
 
    width: 180px; 
 
    height: 180px; 
 
    position: absolute; 
 
    bottom: -126px; 
 
    left: 200px; 
 
    transform: rotate(30deg) skew(-10deg); 
 
}

<div class="container"></div>

왜곡 .

Answer 2

당신은 이미지를 사용하지에 대한 명확한 경우 linear-gradient()

container{ 
 
    width: 480px; 
 
    height:100px; 
 
    display:block; 
 
    margin: 20px auto; 
 
    background-color: limegreen;/* Primary color */ 
 
    background-image: linear-gradient(49deg, transparent 52%, rgba(255, 255, 255, 0.41) 40%, rgba(255, 255, 255, 0) 100%),linear-gradient(-14deg, transparent 40%, rgba(255, 255, 255, 0.41) 40%, rgba(255, 255, 255, 0) 100%),linear-gradient(-55deg, transparent 75%, rgba(255, 255, 255, 0.41) 50%, rgba(255, 255, 255, 0) 100%),linear-gradient(-290deg, transparent 75%, rgba(255, 255, 255, 0.41) 50%, rgba(255, 255, 255, 0) 100%); 
 
}

<container></container>