CSS3 <p>Bir çözüm buldum</p> <p>"CSS3 Çarpık Bir Tarafı Transform" yaratmak mümkün mü ama arka planda (değil renk)</p> için resim kullanmak gerekir, çünkü bana faydası değil Çarpık Bir Tarafı

Question

Transform

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

Hatta bu JsFiddle

sen :before ile deneyin

Answer 1

aslında sınırları yerine çarpık kullanıyordum değiştirmek zorunda tek şey, oldukça yakındı (çarpık alan şeffaf olmalıdır) kullanışlı yanı değil: http://jsfiddle.net/Hfkk7/1101/

Düzenleme: Sınır yaklaşımınız da işe yarayacaktı, yanlış yaptığınız tek şey, div öğenizin üstüne önceki öğeyi sahip olmaktı, böylece saydam kenarlık gösterilmiyordu. Eğer pozisyon senin div solundaki sözde elemanı olurdu, her şey çok çalışmış olurdu: http://jsfiddle.net/Hfkk7/1102/

Answer 2

bu deneyin: görüntü görüntü için iç içe geçmiş bir div kullanmak

unskewiçin ve vermek bu ters eğim değeri. Eğer ebeveynde 20deg olsaydı, o zaman iç içe (resim) div -20deg çarpık bir değer verebilirsin.

.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>

örnek:

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

Answer 3

Bu eski biliyorum ama bunun yerine marjı aynı etkiyi elde etmek için, bir doğrusal gradyanı kullanılarak önermek istiyorum ofset. Bu, herhangi bir içeriği orijinal yerinde muhafaza edecektir.

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

sen dönüştürmek ve kökenleri dönüşümü kullanarak o yapabilirsiniz. Çeşitli transfromları birleştirmek benzer sonuç verir. Umarım faydalı bulursunuz. :) Daha basit dönüşümler için bu örneklere bakın. Bu bıraktı noktası:

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>

Bu hak çarpık noktası vardır: transform: 0% 50%; yapar dikey orta ve yataya orijinini ayarlar ne

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>

öğenin solunda.böylece perspektif, resmin sol kısmında görünmez, bu yüzden düz görünüyor. Perspektif etkisi sağ tarafta, bu yüzden eğimli görünüyor.