CSS3 Trans Skew One Side

Question

Ist es möglich, „CSS3 Trans Skew One Side“

ich eine Lösung zu schaffen, gefunden, aber es ist mir nicht sinnvoll, weil ich ein Hintergrundbild verwenden müssen (nicht Farbe)

#skewOneSide { 
    border-bottom: 40px solid #FF0000; 
    border-left: 50px solid rgba(0, 0, 0, 0); 
    height: 0; 
    line-height: 40px; 
    width: 100px; 
} 

auch diese JsFiddle ist nicht sinnvoll, als auch (schiefe Fläche transparent sein sollte)

Answer 1

Sie versuchen, mit dem :before war ziemlich nah dran, das einzige, was Sie tatsächlich Skew anstelle der Grenzen verwendet wurde geändert hatte: http://jsfiddle.net/Hfkk7/1101/

Bearbeiten: Ihre Grenze Ansatz würde auch funktionieren, das einzige, was Sie falsch gemacht haben, war mit dem Element vorher auf Ihrem div, so dass die transparente Grenze nicht angezeigt wurde. Wenn Sie Position, um die Pseudo-Element auf der linken Seite Ihres div hätte, wäre alles zu gearbeitet haben: http://jsfiddle.net/Hfkk7/1102/

Answer 2

Try this:

Um unskew das Bild eine verschachtelte div für das Bild verwenden und geben es ist der umgekehrte Skew-Wert. Also, wenn Sie 20deg auf dem Eltern haben, dann können Sie dem verschachtelten (Bild) div einen Skew-Wert von -20deg geben.

.container { 
 
    overflow: hidden; 
 
} 
 

 
#parallelogram { 
 
    width: 150px; 
 
    height: 100px; 
 
    margin: 0 0 0 -20px; 
 
    -webkit-transform: skew(20deg); 
 
    -moz-transform: skew(20deg); 
 
    -o-transform: skew(20deg); 
 
    background: red; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.image { 
 
    background: url(http://placekitten.com/301/301); 
 
    position: absolute; 
 
    top: -30px; 
 
    left: -30px; 
 
    right: -30px; 
 
    bottom: -30px; 
 
    -webkit-transform: skew(-20deg); 
 
    -moz-transform: skew(-20deg); 
 
    -o-transform: skew(-20deg); 
 
}

<div class="container"> 
 
    <div id="parallelogram"> 
 
    <div class="image"></div> 
 
    </div> 
 
</div>

Das Beispiel:

http://jsfiddle.net/diegoh/mXLgF/1154/

Answer 3

Ich weiß, das alt ist, aber ich möchte einen linearen Gradienten vorschlagen, mit den gleichen Effekt statt Marge zu erreichen Offset. Dies wird jeden Inhalt an seinem ursprünglichen Ort beibehalten.

http://jsfiddle.net/zwXaf/2/

HTML

<ul> 
    <li><a href="#">One</a></li> 
    <li><a href="#">Two</a></li> 
    <li><a href="#">Three</a></li> 
</ul> 

CSS

/* reset */ 
ul, li, a { 
    margin: 0; padding: 0; 
} 
/* nav stuff */ 
ul, li, a { 
    display: inline-block; 
    text-align: center; 
} 
/* appearance styling */ 
ul { 
    /* hacks to make one side slant only */ 
    overflow: hidden; 
    background: linear-gradient(to right, red, white, white, red); 
} 
li { 
    background-color: red; 
    transform:skewX(-20deg); 
    -ms-transform:skewX(-20deg); 
    -webkit-transform:skewX(-20deg); 
} 
li a { 
    padding: 3px 6px 3px 6px; 
    color: #ffffff; 
    text-decoration: none; 
    width: 80px; 
    transform:skewX(20deg); 
    -ms-transform:skewX(20deg); 
    -webkit-transform:skewX(20deg); 
} 

Answer 4

Sie können machen, dass Ursprünge Transformation verwenden und zu transformieren.

Die Kombination verschiedener Transfomen ergibt ein ähnliches Ergebnis. Ich hoffe, Sie finden es hilfreich. :) Siehe diese Beispiele für einfachere Transformationen. diese verlassen hat Punkt:

div {  
 
    width: 300px; 
 
    height:200px; 
 
    background-image: url('http://placecage.com/g/300/200'); 
 
    -webkit-transform: perspective(300px) rotateX(-30deg); 
 
    -o-transform: perspective(300px) rotateX(-30deg); 
 
    -moz-transform: perspective(300px) rotateX(-30deg); 
 
    -webkit-transform-origin: 100% 50%; 
 
    -moz-transform-origin: 100% 50%; 
 
    -o-transform-origin: 100% 50%; 
 
    transform-origin: 100% 50%; 
 
    margin: 10px 90px; 
 
}

<div></div>

Das hat richtig Skew Punkt:

div {  
 
    width: 300px; 
 
    height:200px; 
 
    background-image: url('http://placecage.com/g/300/200'); 
 
    -webkit-transform: perspective(300px) rotateX(-30deg); 
 
    -o-transform: perspective(300px) rotateX(-30deg); 
 
    -moz-transform: perspective(300px) rotateX(-30deg); 
 
    -webkit-transform-origin: 0% 50%; 
 
    -moz-transform-origin: 0% 50%; 
 
    -o-transform-origin: 0% 50%; 
 
    transform-origin: 0% 50%; 
 
    margin: 10px 90px; 
 
}

<div></div>

was transform: 0% 50%; tut, ist es der Ursprung in der vertikalen Mitte setzt und horizontale links vom Element.Die Perspektive ist also auf der linken Seite des Bildes nicht sichtbar, also sieht sie flach aus. Perspective-Effekt ist dort auf der rechten Seite, so dass es schräg aussieht.