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

2023年1月28日 114次阅读

我想要的是什么

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

我试过了什么

使用放置在图像顶部和底部的SVG三角形(100％宽).顶部左上角和左下角底部.

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

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

我能尝试什么

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

我需要帮助的地方

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

最佳答案 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>
点赞