可以用CSS对角分隔两个背景图像吗？
我知道如何只用一张图片制作它，但我不能用两张图片来制作它。
以下是一个例子：
|-------------|
| /|
| / |
| / |
| / |
| / |
| / |
| / |
|Img1 / Img2 |
| / |
| / |
| / |
| / |
|/ |
|-------------|
提前谢谢。
更新
它必须是响应式的，跨浏览器的，并且只能使用CSS（如果可能的话）。
DEMO我正在寻找的东西（仅限一张图片）
答案 0 :(得分：3)
检查此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
答案 1 :(得分：3)
这是一种使用svg模式混合使用svg / css / js代码的方法：http://codepen.io/anon/pen/aBbGjm
它是垂直和水平响应的（尽管在codepen上只有顶点）。
它适用于较新版本的safari / firefox / chrome以及IE10和IE11，以及Android浏览器4.1.2。
虽然这种方法不能单独使用css，但svg模式有许多有趣的功能，可能还有用：https://developer.mozilla.org/ru/docs/Web/SVG/Element/pattern
<强> CODE：
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<div class="wrapper">
<svg viewBox="0 0 500 600" id="svg" width="500" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="svgimg1" x="0" y="0" patternUnits="userSpaceOnUse" width="500" height="600">
<image xlink:href="http://vectorpatterns.co.uk/wp-content/uploads/2012/06/greencirclepattern.png" x="0" y="0" width="550" height="600"></image>
</pattern>
<pattern id="svgimg2" x="0" y="0" patternUnits="userSpaceOnUse" width="500" height="600">
<image xlink:href="https://s-media-cache-ak0.pinimg.com/564x/b7/d5/f1/b7d5f1e6b9b92b50f8b69498aa5073cd.jpg" x="0" y="0" width="540" height="720"></image>
</pattern>
</defs>
<polygon id="svgcont2" fill="url(#svgimg2)"></polygon>
<polygon id="svgcont1" fill="url(#svgimg1)"></polygon>
</svg>
</div>
</body>
<style>
body {
margin: 0;
background: #ddd;
}
.wrapper {
width: 100%;
height: 100%;
max-width: 500px;
max-height: 600px;
background: #f1f1f1;
}
</style>
<script type="text/javascript">
// http://stackoverflow.com/questions/35641014/two-background-images-separated-diagonally
// http://codepen.io/anon/pen/aBbGjm
window.onresize = function () {
var cont = document.getElementsByClassName('wrapper')[0];
var svg = document.getElementById('svg');
var triangle = document.getElementById('svgcont1');
var rectangle = document.getElementById('svgcont2');
var width = cont.offsetWidth;
var height = cont.offsetHeight;
svg.setAttribute('viewBox', '0 0 '+width+' '+height);
svg.setAttribute('width', width);
svg.setAttribute('height', height);
triangle.setAttribute('points', '0,0 0,'+height+' '+width+',0');
rectangle.setAttribute('points', '0,0 0,'+height+' '+width+','+height+' '+width+',0');
}
var evt = document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false,window,0);
window.dispatchEvent(evt);
</script>
</html>
答案 2 :(得分：1)
使用transform: skewX(-55.98deg); https://jsfiddle.net/pkwytxz2/
<div class='pageOption'>
<a href='#' class='option' data-inf='photo'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2009-28-b-large_web.jpg'>
</a>
<a href='#' class='option' data-inf='cinema'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2013-06-a-large_web.jpg'>
</a>
</div>
CSS
body { background: gainsboro; }
.pageOption {
overflow: hidden;
position: relative;
margin: 0 auto;
width: 40em; height: 27em;
}
.option, .option img { width: 100%; height: 100%; }
.option {
overflow: hidden;
position: absolute;
/* arctan(27 / 40) = 34.01935deg
* need to skew by 90deg - 34.01935deg = 55.98065deg
*/
transform: skewX(-55.98deg);
}
.option:first-child {
left: -.25em;
transform-origin: 100% 0;
}
.option:last-child {
right: -.25em;
transform-origin: 0 100%;
}
.option img { opacity: .75; transition: .5s; }
.option img:hover { opacity: 1; }
.option img, .option:after {
transform: skewX(55.98deg);
transform-origin: inherit;
}
.option:after {
position: absolute;
margin: .5em 1.65em;
color: white;
font: 500 1.25em Courier;
letter-spacing: .1em;
text-transform: uppercase;
content: attr(data-inf);
}
.option:first-child:after { top: 0; left: 0; }
.option:last-child:after { right: 0; bottom: 0; }
答案 3 :(得分：1)
您可以使用clip-path执行此操作：
.container {
position: relative;
width: 200px;
height: 400px;
}
.image-angled {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.image-angled--top {
background: url(https://c1.staticflickr.com/3/2551/3848453164_a125d45959_b.jpg) no-repeat center center;
-webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
clip-path: polygon(0 0, 0% 100%, 100% 0);
}
.image-angled--bottom {
background: url(http://2ndavenuescooters.com/wp-content/uploads/0067.jpg) no-repeat center center;
-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0);
clip-path: polygon(0 100%, 100% 100%, 100% 0);
}<div class="container">
<div class="image-angled image-angled--top"></div>
<div class="image-angled image-angled--bottom"></div>
</div>