如何使用倾斜的边框在CSS中创建图像

Question

我想要的是什么

我有一个图像，需要出现在多边形内。粉红色的区域是图像。

我试过了什么

使用放置在图像顶部和底部的SVG三角形（100％宽）。顶部左上角和左下角底部。

它工作得很好但是在许多浏览器中似乎存在渲染问题，你会看到SVG周围的随机线。 （见下图，可能是一个单独的问题）

我也试过在顶部和底部使用倾斜/旋转元素。但由于元素具有响应性，在某些分辨率下，偏斜元素会产生间隙。 （见下图）

我能尝试什么

使用图像。那里有很多问题。这将是我最后的选择。图像不是与分辨率无关的，我必须使用巨大的图像才能在高dpi屏幕上看起来很好看，这些必须在浏览器中按比例缩小，一切都不好。

我需要帮助的地方

寻找任何其他方式，我可以实现这种效果，最好是基于CSS的解决方案。

Answer 1

SVG

我使用了polygon形状，我创建了你的倾斜图像。 使用patterns我创建了一个可以填充形状的背景图像。

将填充设置为具有模式ID的URL创建了形状。

.slanted {
  width: 50vw;
  height: auto;
}

.shape {
  fill: url(#img1);
}

<svg class="slanted" viewbox="-1 -1 102 102" preserveAspectRatio="none">
  <defs>
    <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
      <image xlink:href="http://lorempixel.com/g/400/200/" x="0" y="0" width="150" height="100" />
    </pattern>
  </defs>
  <polygon class="shape" points="0,20 100,0 100,100, 0,80" />
</svg>

---

CSS

使用3D变换，您可以很容易地获得这种形状。 图像也将旋转。 透视图设置了3D效果的深度。 设置transform：rotate（）设置旋转的程度。

.container {
  margin-top: 50px;
  perspective: 600px;
  width: 300px;
  height: 200px;
}

.shape {
  transform: rotateY(-45deg);
  width: 100%;
  height: 100%;
  background: url(http://lorempixel.com/g/400/200/);
}

<div class="container">
  <div class="shape"></div>
</div>