0
Ich versuche, ein div mit CSS zu manipulieren, um zu vermeiden, ein Bild zu verwenden, um das folgende zu imitieren. Bisher habe ich es verzerrt, aber gibt es irgendeinen Weg, um eine Ecke zu nehmen und sie unterhalb der horizontalen Linie zu positionieren? Die Form scheint ein Quadrat zu sein, wobei die linke untere Ecke etwas verzerrt ist. Ich kann mir nicht vorstellen, wie ich diese eine Ecke ziehen soll, ohne die obere Ecke zu verdrehen.Versuchen, nur eine Seite eines div zu manipulieren
Heres, was ich habe, so weit:
.educationcontentdiv {
background-color: #f9da0b;
padding: 30px;
-webkit-transform: skewY(1deg);
-moz-transform: skewY(1deg);
-ms-transform: skewY(1deg);
-o-transform: skewY(1deg);
transform: skewY(1deg);
}
ich auch nur versucht haben, neigen die eine Seite und es funktioniert gut, aber die Ecke ist immer noch auf der gleiche Linie wie die gegenüberliegende Seite:
margin: 0 0 0 -20px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
overflow:hidden;
position:relative;
Jede Hilfe wäre zu schätzen
iated
Verwandte - http://stackoverflow.com/questions/19761202/css3-transform-skew-one-side –
wahrscheinlich eine Mischung aus 2D und 3D transformiere ... Nimm ein Stück Papier, lege ein Licht hinter dich und dreh das Papier, bis der Schatten so aussieht, wie du willst, ist mein Vorschlag .... weil ich mir nicht ganz sicher bin Ich folge, wie genau dein Ziel aussieht. – abluejelly
Es wäre eine 2D-Transformation der Art, ich versuche, einzelne Ecken eines div anzusprechen und sie herumzubewegen, ohne andere Ecken der Form zu beeinflussen. –