使图像倾斜而不变形

时间:2018-07-13 15:34:58

标签: html css css3 css-transforms skew

我可以在图像上做到这种效果而不会扭曲它吗?我使用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>

Skewed image

2 个答案:

答案 0 :(得分:3)

您可以使用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规则)
  • 保持透明度(您可以设置任何背景)
  • 自适应(您可以轻松缩放图像)

不太好

答案 1 :(得分:2)

您可以将图像用作背景,并依靠渐变来隐藏其中的一些图像。您将获得比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>
data