Question

我已经看了一下，并且无法在SO上找到它。我基本上要把设计放在一起如下......

我使用 Bootstrap4 并且我非常擅长CSS，这仍然给我一些问题。它应该是全屏的，但我可以开放给它最大宽度为1400px。

我的想法：我目前有想法在侧面做两个元素的元素，然后使用 transform 进行旋转，然后将另一个元素放入其中具有背景图像然后使用变换来取消旋转它。

这是我的代码，以显示我尝试过的内容 - https://codepen.io/Gwapedwink/pen/ZaPvyo?editors=1100

<section>
  <div class="image-splitter">
    <div class="inner left">
      <span style="background-image:url('http://placehold.it/940x240/222222/fff&text=left"></span>
    </div>
    <div class="inner right">
      <span style="background-image:url('http://placehold.it/940x240/b4d455/fff&text=right"></span>
    </div>
  </div>
</section>

使用CSS：

.image-splitter {
  background-color: #f1f1f1; 
  position: relative; /* allows for absolute inside */
  height: 240px; /* height of this section is 240px */
  width: 100%;
  overflow: hidden; /* important for this idea */
}
.image-splitter .inner {
  position: absolute;
  width:1000px;
  height: 500px;
  top:50%;
  transform:translateY(-50%);
  -webkit-transform:translateY(-50%);
  overflow:hidden; 
}
.image-splitter .inner.left {
  right: 50%;
  transform: rotate(5deg) translateY(-50%);
  z-index:10;
}
.image-splitter .inner.right {
  left: 50%; 
  z-index:9;
}
.image-splitter .inner span {
  display: block;
  position: absolute;
  top: 50%;
  height:350px;
  width: 100%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  /* background image properties */
  background-position: center;
  background-size: cover;
}
.image-splitter .inner.left span {
  right: -50px; 
  transform: rotate(-5deg) translateY(-50%);
  -webkit-transform: rotate(-5deg) translateY(-50%);
}
.image-splitter .inner.right span {
 left: 0; 
}

你可以看到已经存在很多问题，我想知道我是否遗漏了可用的东西。你可以看到codepen中的文本应该是水平的，但它不是。

提前致谢！

Answer 1

我认为双方文本的垂直错位是由于 placehold.it 将文本呈现到图像上，而与您的代码无关。如果您单独观察两个样本图像 - “left”和“right”，您会发现打印文本的基线已经处于不同的高度。以下是有问题的两个图像的叠加：

这件事发生是因为两个琴弦的总体高度不同。因此，通过使用类似高度的文本可以解决占位符图像的问题。我会使用方括号来平衡高度，如：“[left]”和“[right]”。

为了证明这一点，我使用了另一种方法来实现分割图像效果。这个使用了clip-path css属性，这在IE和Edge上是不可用的，所以它在生产中可能适用于您，也可能不适用。另一方面，这个简化了css的大时间。

body { margin: 0; }

.image-splitter {
    position: relative;
}
.inner {
    overflow: hidden;
    width: 60%;
    height: 240px;
    background: transparent no-repeat center center / cover;
}
.right {
    position: absolute;
    top: 0;
    right: 0;
    -webkit-clip-path: polygon(calc(16.667% + 50px) 0%, 100% 0%, 100% 100%, 16.667% 100%);
    clip-path: polygon(calc(16.667% + 50px) 0%, 100% 0%, 100% 100%, 16.667% 100%);
}

<section>
    <div class="image-splitter">
        <div class="inner left" style="background-image:url('http://placehold.it/940x240/222222/fff&text=[left]">
        </div>

        <div class="inner right" style="background-image:url('http://placehold.it/940x240/b4d455/fff&text=[right]">
        </div>
    </div>
</section>

Answer 2

根据@dference的建议，使用clip-path变得清晰。问题在于浏览器兼容性。

所以，我上面给出了他的答案，然后将其转换为使用SVG - 但也必须使用foreignObject来支持Edge。

  <div class="image-splitter">
    <div class="inner left" style="background-image:url('https://picsum.photos/760/240?image=1067"></div>
    <div class="inner right">

    <!-- SVG CLIP -->
    <svg width="100%" height="240px">
      <defs>
        <clipPath id="clipPolygon">
          <polygon points="0 240,2000 240,2000 0,50 0">
          </polygon>
        </clipPath>
      </defs>
      <foreignObject clip-path="url(#clipPolygon)" width="100%" height="100%">
        <img src="https://picsum.photos/760/240?image=1049">
      </foreignObject>
    </svg>
    <!-- / SVG CLIP -->

    </div> <!-- /.inner.right -->
  </div> <!-- /.image-splitter -->

把它扔进CSS

/* image splitter */

.image-splitter {
  position: relative;
  height: 230px;
  overflow: hidden;
  & .inner {
    overflow: hidden;
    width: 60%;
    height: 240px;
    background: transparent no-repeat center center / cover;
  }
  & .right {
    position: absolute;
    top: 0;
    width:50%;
    right: 0;
    /*-webkit-clip-path: polygon(calc(16.667% + 50px) 0%, 100% 0%, 100% 100%, 16.667% 100%);
    clip-path: polygon(calc(16.667% + 50px) 0%, 100% 0%, 100% 100%, 16.667% 100%);*/

    /* Clipping */
    -webkit-clip-path: polygon(0px 240px,2000px 240px,2000px 0px,50px 0px);
    clip-path: url("#clipPolygon");
    & img {
      width: 100%;
      min-height: 240px;
    }
  }
}

你可以在my codepen看一下这个 - 你也可以看到我在下面做了内容分割器的简洁方法。

CSS图像分割为两列并在中心分割

2 个答案: