倾斜图像而不扭曲它
Skewing image without distorting it
我可以在不扭曲图像的情况下对图像进行这种效果吗?我使用 css 尝试了倾斜效果,但它以某种方式旋转了图像并裁剪了一半,我希望它保持原样,大小和所有内容都相同,但边缘与附加图像一样,并且这是我的代码:
div.skewed {
position: relative;
height: 140px;
transform: skew(-2deg) rotate(2deg);
-webkit-transform: skew(-2deg) rotate(2deg);
-moz-transform: skew(-2deg) rotate(2deg);
overflow: hidden;
}
div.skewed > * {
width: 110%;
position: absolute;
top: 50%;
transform: skew(2deg) rotate(-2deg) translateY(-50%);
-webkit-transform: skew(2deg) rotate(-2deg) translateY(-50%);
-moz-transform: skew(2deg) rotate(-2deg) translateY(-50%);
}
<div class="skewed">
<img src="https://www.todaysparent.com/wp-content/uploads/2013/04/sleeping-baby-article.jpg">
</div>
您可以使用 clip-path
裁剪图像而不扭曲它。使用 polygon
函数,您可以通过提供单个角的 x,y 坐标列表来指定自定义形状。如果您使用 %
.
这样的相对单位,它甚至会响应
img {
width: 25%; /* for demonstration purposes */
clip-path: polygon(0 0, 60% 0, 100% 30%, 100% 100%, 0 70%);
}
<img src="https://www.todaysparent.com/wp-content/uploads/2013/04/sleeping-baby-article.jpg">
不错
- 需要最少的代码(只有 1 个简单的 CSS 规则)
- 保持透明度(您可以设置任何背景)
- 响应式(您可以轻松缩放图像)
不太好
您可以使用图像作为背景并依靠渐变来隐藏部分图像。您将获得比 clip-path
更好的支持,但没有透明度:
div.skewed {
height: 200px;
width:200px;
background:
linear-gradient(to bottom left,transparent 49%,#fff 50.5%) bottom/100% 25% no-repeat,
linear-gradient(to bottom left,#fff 50%,transparent 50.5%) top right/40% 40% no-repeat,
url(https://www.todaysparent.com/wp-content/uploads/2013/04/sleeping-baby-article.jpg) center/cover;
display:inline-block;
vertical-align:top;
}
<div class="skewed">
</div>
<div class="skewed" style="width:150px;height:150px;">
</div>
我可以在不扭曲图像的情况下对图像进行这种效果吗?我使用 css 尝试了倾斜效果,但它以某种方式旋转了图像并裁剪了一半,我希望它保持原样,大小和所有内容都相同,但边缘与附加图像一样,并且这是我的代码:
div.skewed {
position: relative;
height: 140px;
transform: skew(-2deg) rotate(2deg);
-webkit-transform: skew(-2deg) rotate(2deg);
-moz-transform: skew(-2deg) rotate(2deg);
overflow: hidden;
}
div.skewed > * {
width: 110%;
position: absolute;
top: 50%;
transform: skew(2deg) rotate(-2deg) translateY(-50%);
-webkit-transform: skew(2deg) rotate(-2deg) translateY(-50%);
-moz-transform: skew(2deg) rotate(-2deg) translateY(-50%);
}
<div class="skewed">
<img src="https://www.todaysparent.com/wp-content/uploads/2013/04/sleeping-baby-article.jpg">
</div>
您可以使用 clip-path
裁剪图像而不扭曲它。使用 polygon
函数,您可以通过提供单个角的 x,y 坐标列表来指定自定义形状。如果您使用 %
.
img {
width: 25%; /* for demonstration purposes */
clip-path: polygon(0 0, 60% 0, 100% 30%, 100% 100%, 0 70%);
}
<img src="https://www.todaysparent.com/wp-content/uploads/2013/04/sleeping-baby-article.jpg">
不错
- 需要最少的代码(只有 1 个简单的 CSS 规则)
- 保持透明度(您可以设置任何背景)
- 响应式(您可以轻松缩放图像)
不太好
您可以使用图像作为背景并依靠渐变来隐藏部分图像。您将获得比 clip-path
更好的支持,但没有透明度:
div.skewed {
height: 200px;
width:200px;
background:
linear-gradient(to bottom left,transparent 49%,#fff 50.5%) bottom/100% 25% no-repeat,
linear-gradient(to bottom left,#fff 50%,transparent 50.5%) top right/40% 40% no-repeat,
url(https://www.todaysparent.com/wp-content/uploads/2013/04/sleeping-baby-article.jpg) center/cover;
display:inline-block;
vertical-align:top;
}
<div class="skewed">
</div>
<div class="skewed" style="width:150px;height:150px;">
</div>