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

Question

我想要的是什么

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

我尝试了什么

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

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

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

我可以尝试

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

我需要帮助的地方

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

Answer 1

SVG

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

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

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

CSS

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

＆＃13;

＆＃13;

.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/);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;