Ich versuche, einen Header mit mehreren CSS-Farben darauf zu entwerfen. Nur von den Farben

Ich versuche, eine Überschrift zu machen, die ein wenig wie das obige Bild aussieht.

Ich möchte Formen in verschiedenen Grüntönen hinzufügen. (Die Abbildungen werden ein in Farbe geändert.)

Ich habe gespielt um mit dem, was ich im Internet finden konnte und am Ende mit diesem:

.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

Ich will nicht füge ein Bild als Hintergrund hinzu. Ich kann nicht herausfinden, wie ich diesem Code mehr Formen hinzufügen kann. Gibt es einen anderen Weg, ich sollte versuchen, es zu komponieren?

Kann mir bitte jemand helfen?

Quelle

2017-10-26 Florina Adriana

Wenn Sie bestimmte sind hier um ein Bild nicht verwenden, können Sie wahrscheinlich besser wäre, eine Leinwand mit dafür, da sonst die einzige andere So können Sie mehr Formen einfügen, indem Sie ein Vorher verwenden und dann tatsächliche Elemente darin einfügen. – Pete

Die Verwendung eines Bildes wäre besser, denke ich, in Bezug auf Formen werden nicht ordentlich sein, wenn y Unsere Anwendung wird dynamisch sein – Tomm

Sie können mehrere Hintergründe, lineare Farbverläufe, Inset-Box-Schatten, SVG usw. verwenden. –

Wie Sie sehen können, haben Sie 4 Farben, so dass wir es auf diese Weise tun können:

1) erste Farbe der Hintergrund des Behälters wird

2) eine zweite Farbe eine Grenzfarbe sein kann des Behälters

3) unter Verwendung einer dritten: vor Element

4) vierte Verwendung: nach dem Element

Und der Trick zu verwenden ist, so mich und Rotation Transformation Skew

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>

Dann können Sie die Werte und Farbe anpassen, wie Sie möchten.

Quelle

2017-10-26 08:40:20

können Sie verwenden 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>

Quelle

2017-11-07 06:01:39

Ich versuche, einen Header mit mehreren CSS-Farben darauf zu entwerfen. Nur von den Farben

Antwort

Verwandte Themen