倾斜图像而不扭曲它答案

【问题标题】：Skewing image without distorting it倾斜图像而不扭曲它
【发布时间】：2018-12-22 00:53:48
【问题描述】：

我可以在不扭曲图像的情况下对图像进行此效果吗？我尝试了使用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>

【问题讨论】：

标签： html css css-transforms skew

【解决方案1】：

您可以使用clip-path 裁剪图像而不会使其变形。使用 polygon 函数，您可以通过提供单个角的 x,y 坐标列表来指定自定义形状。如果您使用像 % 这样的相对单位，它甚至是响应式的。

img {
  width: 25%; /* for demonstration purposes */
  clip-path: polygon(0 0, 60% 0, 100% 30%, 100% 100%, 0 70%);
}

&lt;img src="https://www.todaysparent.com/wp-content/uploads/2013/04/sleeping-baby-article.jpg"&gt;

好的

需要最少的代码（只需 1 条简单的 CSS 规则）
保持透明度（您可以设置任何背景）
响应式（您可以轻松缩放图像）

不太好

Browser compatibility

【讨论】：

【解决方案2】：

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

【讨论】：