Üzerinde birden fazla css rengi olan bir başlık tasarlamaya çalışıyorum. Sadece renkler

Question

Yukarıdaki görüntüye benzeyen bir başlık oluşturmaya çalışıyorum.

Farklı yeşil tonlarında şekiller eklemek istiyorum.

ben internette bulabildiğim ne etrafında oynamıştır (. Görüntüleri boya değiştirilir) ve bu ile sona erdi:

.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

ben istemiyorum Bir resmi arka plan olarak ekleyin. Bu koda nasıl daha fazla şekil ekleyeceğimi anlayamıyorum. Bunu oluşturmaya çalışmamın başka bir yolu var mı?

Birisi yardım edebilir mi? Gördüğünüz gibi

Answer 1

, biz bu şekilde yapabiliriz böylece 4 renk var:

1) ilk renkli

2) ikinci renk bir çerçeve rengi olabilir kabın arka plan olacak daha önce eleman

4) kullanılarak dördüncü: öğe sonra

ve hile çok kullanmaktır kap

3) kullanılarak üçüncü bölgesinin Beni istediğiniz kadar Sonra değerleri ve rengini ayarlamak olabilir ve dönüşlerini dönüşümü

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>

çarpık .

Answer 2

Sen, sen bir görüntü kullanmayan hakkında kesin değilseniz 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>