如何创建三角形响应背景图像？

Question

我想将两个图像作为对角分离的背景。我认为最好的办法是使用SVG形状作为剪贴蒙版，但我不确定。

下图显示了我想要实现的目标。正如你所看到的那样，这两幅图像是完全对角分割的。

令我不安的问题是，我无法找到一种方法来创建这样的分割，而不是拉伸这些图像并始终保持全屏（因此响应）。

我的问题/目标： 如何制作一个由两个对角分离的图像组成的页面，这些图像一起构成一个全屏视图，其中图像未被拉伸，并且分割位于两个角落。

编辑：在this topic的帮助下，您可以轻松创建两个对角线。这是将图像作为这些多边形的背景的问题。但是，图像应该是全屏的，因此应该缩放，而不是拉伸。

复制下面的答案

Your best bet may be to use a simple SVG

<svg viewBox="0 0 25 25" preserveAspectRatio="none">
    <polyline points="0,0  25,0  0,25" fill="#FF0000" id="top"/>
    <polyline points="25,0  25,25  0,25" fill="#00FF00" id="bottom"/>
</svg>
You can use CSS to style the elements on hover:

#top:hover {
    fill: #880000;
}

Demo here: http://codepen.io/Godwin/pen/mIqlA

Answer 1

您可以使用clip-path

执行此操作

结果 - https://jsfiddle.net/11kn8mjn/4/

如何完成

两个带有响应背景图像的全屏div位于彼此之上。

剪辑蒙版用于显示每个div的响应三角形。

<强>代码

两个div位于彼此之上：

div {
  position: absolute;
  width: 100vw;
  height: 100vh;
}

使用响应式背景图片：

.div-one { background: url('http://i.imgur.com/8LgIL7B.jpg') center / cover no-repeat; }

.div-two { background: url('http://i.imgur.com/fBL4WC1.jpg') center / cover no-repeat; }

剪辑路径显示每个div的三角形。使用vh和vw值使三角形响应：

.div-one { clip-path: polygon(0 0, 100vh 0, 100vw 0); }

.div-two { clip-path: polygon(100vw 0, 0% 100vh, 100vw 100vh); }

浏览器支持

对剪辑路径的支持不是很好 - http://caniuse.com/#feat=css-clip-path