html - 两张背景图片对 Angular 分开

Question

有可能用 CSS 将两个背景图像对 Angular 分开吗？

我知道如何只用一张图片制作它，但我不能用两张图片制作它。

这是一个例子:

|-------------|
|            /|
|           / |
|          /  |
|         /   |
|        /    |
|       /     |
|      /      |
|Img1 / Img2  |
|    /        |
|   /         |
|  /          |
| /           |
|/            |
|-------------|

提前谢谢你。

---

更新

它必须是响应式的、跨浏览器的并且只使用 CSS(如果可能的话)。

DEMO我在看什么(只有一张图片)

Answer 1

检查此 CSS 和 JS 解决方案:https://jsfiddle.net/u7hf0y1g/它不会在左下角和右上角之间生成分隔，但会创建一个响应式分隔。

HTML:

<div class="maincontent">
  <ul class="trapezoid">
    <li id="trap-1">
      <div class="inner cover top-right" style="background-image: url('http://www.pressedfortimelincoln.co.uk/wp-content/uploads/2013/05/placeholder1-1024x768.png'); background-color: #ffffff">
      </div>
    </li>
      <li id="trap-2">
        <div class="inner cover top-right" style="background-image: url('http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy.png'); background-color: #ffffff">
        </div>
      </li>
  </ul>
</div>

JS:

window.onresize = function () {
  var trap1 = document.getElementById('trap-1');
  var trap2 = document.getElementById('trap-2');
  var width = trap1.offsetWidth;
  var height = trap1.offsetHeight;
  var marginLeft = Math.round(Math.sin(10 / 180 * Math.PI) * height /  2 * 1.02);
  var imageWidth = marginLeft + width;
  var trap1inner = document.querySelector('#trap-1 .inner');
  var viewport = window.innerWidth;
  var newWidth = viewport - (width - (marginLeft + marginLeft));

  trap1.style.marginLeft = '-' + marginLeft + 'px';
  trap1inner.style.width = imageWidth + 'px';
  trap2.style.width = newWidth + 'px';
}
var evt = document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false,window,0);
window.dispatchEvent(evt);

CSS:

body {
  margin: 0;
  padding: 0;
}
.maincontent {
  width: 100%;
  overflow-x: hidden;
}
.trapezoid {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.trapezoid li {
  position: absolute;
  overflow: hidden;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 0;
}
.trapezoid li .inner {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  overflow: hidden;
  background-repeat: no-repeat;
  background-color: #EAEAEA;
  pointer-events: none;
}
.inner.top-right {
  background-position: top right;
}
.inner.cover {
  background-size: cover;
 }
.inner.full-width {
  background-size: auto 100%;
}
#trap-1 {
  width: 55%;
  height: 100%;
  -webkit-transform: skew(-10deg);
  -ms-transform: skew(-10deg);
  transform: skew(-10deg);
  z-index: 3;
}
#trap-1 .inner {
  -webkit-transform: skew(10deg);
  -ms-transform: skew(10deg);
  transform: skew(10deg);
}
#trap-2 {
  width: 45%;
  height: 100%;
  right: 0;
  top: 0;
}

致谢:detomon-monoxid、iamso.io、Luisa Low Pew