是否可以创建“CSS3变形倾斜一面”
我找到一个解决方案,但对我来说没有用,因为我需要使用图像进行背景(不是颜色)
#skewOneSide {
border-bottom: 40px solid #FF0000;
border-left: 50px solid rgba(0,0);
height: 0;
line-height: 40px;
width: 100px;
}
即使这个JsFiddle也没有用(偏斜的区域应该是透明的)
解决方法
尝试这个：
要取消选择图像,请使用图像的嵌套div,并给出相反的斜率值.所以如果你的父母有20deg,你可以给嵌套(图像)div一个-20deg的偏移值.
.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>
例子：
