Wie erstellt man Parallelogramme divs?

Ich arbeite an einem Projekt, wo ich etwas Ähnliches erstellen muss, was im Bild unten gezeigt wird. Konkret, die gelben Parallelogramme mit Text, die innerhalb des roten Rechtecks zeigen (ich brauche dieses rote Rechteck nicht). Wie Sie die divs standardmäßig wissen, sind rechteckigWie erstellt man Parallelogramme divs?

Also meine Frage ist, wie könnte 3 Parallelogramm-divs oder etwas ähnlich erstellen?

Irgendwelche Hinweise oder Richtlinien würden

Dank

PS klar sein: Ich kann nicht ein Bild als Hintergrund verwenden, weil, wenn Sie die Fenster kleiner tun hat der Hintergrund nicht den Text

Quelle

2016-11-02 Anonymous

Einige mögliche Methoden mit CSS: http://Stackoverflow.com/q/31626183/3597276 –

Vielen Dank an alle! Ich denke ich habe es. –

flex und gradient macht es auch einfach ... :) http://codepen.io/gc-nomade/pen/QGWEjg –

Sie können die negativen skewX verwenden Transformations den gewünschten Effekt zu erhalten:

div { 
 
    margin: 20px; 
 
    width: 200px; 
 
    height: 100px; 
 
    display: inline-block; 
 
    background: yellow;  
 
    border: 1px solid black; 
 
    transform: skewX(-10deg); 
 
    }

<div></div>

Quelle

2016-11-02 17:32:17 Shomz

-1

Versuchen folgen diese CSS-Stil:

#parallelogram { 
width: 150px; 
height: 100px; 
-webkit-transform: skew(20deg); 
-moz-transform: skew(20deg); 
-o-transform: skew(20deg); 
background: red;}

insted #parallelogram können Sie wählen Ihre eigenen Klassennamen ...

Quelle

2016-11-02 17:31:54 weinde

dafür würde man skew 170 brauchen und es würde wahrscheinlich helfen, ihm zu sagen, dass du das von https bekommen hast: //css-tricks.com/examples/ShapesOfCSS/ so kann er es ein wenig erkunden – scrappedcola

danke für das Hinzufügen ... schrieb meine Anwser in Eile ... – weinde

weinde fast hat es, aber zwei Probleme: Sie müssen Anzeige Inline Block setzen, und der Inhalt Das Div wird verzerrt sein. Eine wirklich faule Art, dies zu tun wäre:

.para { 
width: 150px; 
height: 100px; 
-webkit-transform: skew(20deg); 
-moz-transform: skew(20deg); 
-o-transform: skew(20deg); 
background: red; 
display: inline-block; 
vertical-align: top; 
} 
.unskew { 
-webkit-transform: skew(-20deg); 
-moz-transform: skew(-20deg); 
-o-transform: skew(-20deg); 
} 

<div class="para"><div class="unskew">stuff</div></div> 
<div class="para">stuff 2</div>

Ich fühle mich wie die unskaw Div ist zwar unnötig.

Sie könnten auch versuchen, mit css3 Hintergrund Farbverläufe zu spielen. Wenden Sie den Farbverlauf beispielsweise auf ein Elternteil an, das sich hinter den 3 Elementen befindet. http://www.quirksmode.org/css/images/angles.html

Quelle

2016-11-02 17:46:00 Vinny

Wie erstellt man Parallelogramme divs?

Antwort

Verwandte Themen