css - 如何创建三 Angular 形响应式背景图像？

Question

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

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

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

我的问题/目标:我如何制作一个包含两个沿对 Angular 线分开的图像的页面，这些图像一起构成一个全屏 View ，其中图像未被拉伸(stretch)并且分割位于两个 Angular 。

---

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

复制下面的答案

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 的响应三 Angular 形。

代码

两个 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 的三 Angular 形。使用 vh 和 vw 值使三 Angular 形响应:

.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