css - 如何在 CSS 中创建带有倾斜边框的图像

Question

我要做什么

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

我尝试过的

使用位于图像顶部和底部的 SVG 三 Angular 形(100% 宽)。顶部的左上角三 Angular 形和底部的左下角三 Angular 形。

效果很好，但在许多浏览器上似乎存在渲染问题，您会在 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>