5张图像用对角线对称分隔 [英] 5 images symmetrically seperated with diagonal lines

问题描述

我在Internet上浏览，却在reddit上偶然发现了这个主题

I browsing around the internet and I stumbled upon this theme on reddit

看到这个可爱的横幅后.我想尝试使用我选择的五张对称图像来模拟这样的事情，这些图像由对角线分隔，就像上面的图片一样.也许另外尝试在分类图像的顶部加上一些文本.像这样:

After seeing this lovely banner. I wanted to try and emulate something like this using five symmetric images of my choice that is separated by diagonal lines just like the picture above. Maybe additionally try and put in some text on top of the assorted images. Something like this:

我尝试使用猫图片在CSS中类似地在线重写

I tried re-writing something similarly online in css using cats picture

.image-container {
  width: 90%;
  height: 200px;
  position: relative;
  margin: 30px auto;
  background: black;
  overflow: hidden;
}


.image-one {
  right: 20%;
}
.image-two {
  right: 20%;
}
.image-three {
  right: 20%;
}
.image-four {
  right: 20%;
}
.image-five {
  right: 20%;
}


.image-one,
.image-two,
.image-three,
.image-four,
.image-five {
  position: absolute;
  height: 100%;
  width: 40%;
  min-width: 20px;
  -ms-transform: skewX(-25deg);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
  background: white;
  overflow: hidden;
 top:0;
  margin-right: 50px;
  border: 5px solid black;
  border-top: 0;
  border-bottom: 0;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.9);
}

.image-one:after, .image-two:after,
.image-three:after, .image-four:after,
.image-five:after{
  -ms-transform: skewX(25deg);
  -webkit-transform: skewX(25deg);
  transform: skewX(25deg);
  position: absolute;
  width: 120%;
  height: 100%;
  display: block;
  top: 0;
  content: "";
}

.image-one:after{
  right: -93px;
  background: url("http://lorempixel.com/500/400/cats") no-repeat center center;
  background-size: cover;
}
.image-two:after {
  left: -93px;
  background: url("http://lorempixel.com/500/401/cats") no-repeat center center;
  background-size: cover;
}
.image-three:after {
  left: -93px;
  background: url("http://lorempixel.com/500/401/cats") no-repeat center center;
  background-size: cover;
}
.image-four:after {
  left: -93px;
  background: url("http://lorempixel.com/500/401/cats") no-repeat center center;
  background-size: cover;
}
.image-five:after {
  left: -93px;
  background: url("http://lorempixel.com/500/401/cats") no-repeat center center;
      background-size: cover;
}

但是，并不是所有的猫图片都在盒子内，也不是均匀分布的

However, not all the cat pictures are inside of box and are also not evenly distributed

<div class='image-container'>
  <div class='image-left'></div>
  <div class='image-right'></div>
</div>


<div class='image-container'>
  <div class='image-one'></div>
    <div class='image-two'></div>
        <div class='image-three'></div>
            <div class='image-four'></div>
                <div class='image-five'></div>
</div>

推荐答案

无需使用定位的元素，您可以像这样简化并使用background-position将元素居中:

No need to use positioned element, you can simplify like this and use background-position to center the element:

.container {
  display: flex;
  height: 150px;
  margin: 0 30px;
}

.box {
  flex: 1;
  border: 1px solid;
  transform: skew(-25deg);
  position: relative;
  overflow: hidden;
}

.box:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  right: -50%;
  transform: skew(25deg);
  background-image: var(--i);
  background-position: center;
}

<div class="container">
  <div class="box" style="--i:url(https://lorempixel.com/400/200/)"></div>
  <div class="box" style="--i:url(https://lorempixel.com/400/300/)"></div>
  <div class="box" style="--i:url(https://lorempixel.com/300/200/)"></div>
  <div class="box" style="--i:url(https://lorempixel.com/400/300/)"></div>
  <div class="box" style="--i:url(https://lorempixel.com/200/300/)"></div>
</div>

更新

以下是该代码的另一个版本，该版本受到更多支持(尤其是IE):

Here is another version of the code which is more supported (especially for IE):

.container {
  font-size:0;
  height: 150px;
  margin: 0 30px;
}

.box {
  font-size:initial;
  width:calc(100% / 5);
  height:100%;
  border: 1px solid;
  box-sizing:border-box;
  transform: skew(-25deg);
  position: relative;
  overflow: hidden;
  display:inline-block;
}

.box span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  right: -50%;
  transform: skew(25deg);
  background-position: center;
  background-size:cover;
}

<div class="container">
  <div class="box">
    <span style="background-image:url(https://lorempixel.com/400/200/)"></span>
  </div>
  <div class="box">
    <span style="background-image:url(https://lorempixel.com/400/300/)"></span>
  </div>
  <div class="box">
    <span style="background-image:url(https://lorempixel.com/200/200/)"></span>  
  </div>
  <div class="box">
      <span style="background-image:url(https://lorempixel.com/300/200/)"></span>
  </div>
  <div class="box">
     <span style="background-image:url(https://lorempixel.com/400/400/)"></span>
  </div>
</div>

这篇关于5张图像用对角线对称分隔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！