Próbuję zaprojektować nagłówek z wieloma kolorami css na nim. Tylko z kolorów

Question

Próbuję zrobić nagłówek, który wygląda trochę jak powyższy obraz.

Chcę dodać kształty w różnych odcieniach zieleni. (Zdjęcie jest zmodyfikowana w farbie.)

Grałem około z tym, co udało mi się znaleźć w internecie, a zakończył się z tym:

.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

ja nie chcę dodaj obraz jako tło. Nie mogę wymyślić, jak dodać więcej kształtów do tego kodu. Czy jest inny sposób, w jaki powinienem spróbować go skomponować?

Czy ktoś może pomóc?

Answer 1

Jak widać, masz 4 kolory więc możemy zrobić to w ten sposób:

1) pierwszy kolor będzie tło pojemnika

2) drugi kolor może być kolor obramowania pojemnika

3) trzecia z: przed elementem

4) czwarty pomocą po elementu

A trick jest użycie tak mi pochylać i obrót transformację

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>

Następnie można dostosować wartości i kolor, jak chcesz.

Answer 2

Można użyć 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>