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

Question

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

下图显示了我想要实现的目标。如您所见，这两张图片完全沿对角线分割。

一直困扰我的问题是，我找不到一种方法来创建这种拆分，同时不拉伸这些图像并始终保持全屏显示（因此响应）。

我的question/goal：如何制作一个包含两个沿对角线分开的图像的页面，这两个图像一起构成一个全屏视图，其中图像没有被拉伸并且分割在两个角上。

编辑：在 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

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

How do I create a triangular responsive background image?

css

svg

image

background-image