CSS中图像的倾斜容器

Posted 2023-02-25

【中文标题】CSS中图像的倾斜容器

【英文标题】：Skewed containers for images in CSS

【发布时间】：2015-05-05 11:56:40

【问题描述】：

所以我想在倾斜的容器中制作一行图像。请看图完全理解：

到目前为止，我得到的最好的结果是使容器围绕图像倾斜，但这样做有两个问题：内部图像倾斜，最左边和最右边有间隙。

html：

<section>
  <div class="image-wrap">
    <img src="http://i.imgur.com/pHCV0Vt.jpg">
  </div>
  <div class="image-wrap">
    <img src="http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg">
  </div>
  <div class="image-wrap">
    <img src="http://i.imgur.com/pHCV0Vt.jpg">
  </div>
  <div class="image-wrap">
    <img src="http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg">
  </div>
  <div class="image-wrap">
    <img src="http://i.imgur.com/pHCV0Vt.jpg">
  </div>
</section>

到目前为止我所拥有的：

CSS：

html, body 
  width: 100%;


section 
  display: flex;
  height: 250px;
  overflow: hidden;


.image-wrap 
  width: 20%;
  height: 100px;
  transform: skew(-5deg);
  img 
    width: 100%;
    height: 140px;
  

http://codepen.io/mildrenben/pen/oXjzrK

【参考方案1】：

clip-path 可以很好地做到这一点，但问题是目前还没有得到很好的支持。查看更多关于 here 的信息并了解更多关于 clip-path here 的信息。

这是一个例子：

html, body 
  width: 100%;


section 
  display: flex;
  height: 250px;
  overflow: hidden;


.image-wrap 
  width: 30%;
  height: 100px;
  -webkit-clip-path: polygon(10% 0%, 100% 0, 90% 100%, 0 100%);
  clip-path: polygon(10% 0%, 100% 0, 90% 100%, 0 100%);
  margin-left: -3%;


.image-wrap:last-child 
   -webkit-clip-path: none;
  clip-path: none;

img 
  width: 100%;
  height: 140px;

<section>
  <div class="image-wrap">
    <img src="http://i.imgur.com/pHCV0Vt.jpg">
  </div>
  <div class="image-wrap">
    <img src="http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg">
  </div>
  <div class="image-wrap">
    <img src="http://i.imgur.com/pHCV0Vt.jpg">
  </div>
  <div class="image-wrap">
    <img src="http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg">
  </div>
  <div class="image-wrap">
    <img src="http://i.imgur.com/pHCV0Vt.jpg">
  </div>
</section>

【参考方案2】：

一种可能的解决方案（但不是很优雅）是将父容器向一个方向倾斜，然后将子容器向相反方向倾斜。同时，如果您可以将这些图像设置为 bg 图像会更好，因为您可以更好地控制背景大小。

这种方法的缩小范围是：

将背景图片设置为内联样式（如果它们是动态的）； 您需要计算将子图像拉到左/右所需的确切百分比，以便填充由倾斜变换角度创建的整个空间（我已将其设置为 5%，仅用于演示目的） .

总而言之，您可以选择是否将其集成到您的应用中。

html,
body 
  width: 100%;


section 
  display: flex;
  height: 250px;
  overflow: hidden;


.image-wrap 
  border: 1px solid blue;
  width: 20%;
  height: 120px;
  transform: skew(-5deg);
  overflow: hidden;
  position: relative;
  backface-visibility: hidden;


.image-wrap img,
.image-wrap .thumb 
  transform: skew(5deg);
  position: absolute;
  right: -5%;
  left: -5%;
  top: 0;
  bottom: 0;

<section>
  <div class="image-wrap">
    <div class="thumb" style="background: url('http://i.imgur.com/pHCV0Vt.jpg') no-repeat transparent;"></div>
  </div>
  <div class="image-wrap">
    <div class="thumb" style="background: url('http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg') no-repeat transparent;"></div>
  </div>
  <div class="image-wrap">
    <div class="thumb" style="background: url('http://i.imgur.com/pHCV0Vt.jpg') no-repeat transparent;"></div>
  </div>
  <div class="image-wrap">
    <div class="thumb" style="background: url('http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg') no-repeat transparent;"></div>
  </div>
  <div class="image-wrap">
    <div class="thumb" style="background: url('http://i.imgur.com/pHCV0Vt.jpg') no-repeat transparent;"></div>
  </div>
</section>

我知道这不是最干净的解决方案，但这是我当时想出的。

【参考方案3】：

根据你的例子，你可以把它做成这样。只需使用 .image-wrap 高度即可在图像和环绕之间实现完美平衡 :)

*
  margin: 0;

html, body 
  width: 100%;


section 
  display: flex;
  height: 250px;
  overflow: hidden;

.image-wrap 
  width: 20%;
  height: 250px;
  -webkit-transform: skew(-5deg);
  -ms-transform: skew(-5deg);
  transform: skew(-5deg);
  overflow: hidden;

.image-wrap img 
  width: auto;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: skew(5deg);
  -ms-transform: skew(5deg);
  transform: skew(5deg);

<section>
  <div class="image-wrap">
    <img src="http://i.imgur.com/pHCV0Vt.jpg">
  </div>
  <div class="image-wrap">
    <img src="http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg">
  </div>
  <div class="image-wrap">
    <img src="http://i.imgur.com/pHCV0Vt.jpg">
  </div>
  <div class="image-wrap">
    <img src="http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg">
  </div>
  <div class="image-wrap">
    <img src="http://i.imgur.com/pHCV0Vt.jpg">
  </div>
</section>