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

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