CSS3变形歪一边 [英] CSS3 Transform Skew One Side

问题描述

是否可以创建CSS3转换偏斜一边

我发现一个解决方案，但它对我没有用，因为我需要使用图像作为背景（不是颜色）：

  #skewOneSide {
 border-bottom：40px solid＃FF0000; 
 border-left：50px solid rgba（0，0，0，0）; 
 height：0; 
 line-height：40px; 
 width：100px; 
} 
  

即使这也不是有用的：http://jsfiddle.net/Hfkk7/4/ （偏斜区域应该是透明的）

解决方案

尝试：

要 unskew 图像并给它相反的扭斜值。所以如果你在父节点上有20deg，那么你可以给嵌套（图像）div一个偏差值-20deg。

HTML：

 < div class =container> 
< div id =parallelogram> 
< div class =image>< / div> 
< / div> 
< / div> 
   
 
 
 
  CSS ：
  .container {
 overflow：hidden; 
} 
 #parallellogram {
 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/300/300）; 
 position：absolute; 
 top：-30px; 
 left：-30px; 
 right：-30px; 
 bottom：-30px; 
 -webkit-transform：skew（-20deg）; 
 -moz-transform：skew（-20deg）; 
 -o-transform：skew（-20deg）; 
} 
  
示例：
 
 
 
  http://jsfiddle.net/diegoh/mXLgF/1154/  
 
Is it possible to create "CSS3 Transform Skew One Side" 

I found one solution, but it's not useful to me because I need to use a image for background (not Color):
#skewOneSide{
    border-bottom: 40px solid #FF0000;
    border-left: 50px solid rgba(0, 0, 0, 0);
    height: 0;
    line-height: 40px;
    width: 100px;
}
Even this is not useful as well : http://jsfiddle.net/Hfkk7/4/ (skewed area should be transparent)
解决方案
Try this:

To unskew the image use a nested div for the image and give it the opposite skew value. So if you had 20deg on the parent then you can give the nested (image) div a skew value of -20deg.

The HTML:
<div class="container">
    <div id="parallelogram">
        <div class="image"></div>
    </div>
</div>
The CSS:
.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/300/300);
    position:absolute;
    top:-30px;
    left:-30px;
    right:-30px;
    bottom:-30px;
        -webkit-transform: skew(-20deg);
       -moz-transform: skew(-20deg);
         -o-transform: skew(-20deg);
}
The example:

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

                        
这篇关于CSS3变形歪一边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！