CODEWITHSUNDEEP
htmlcss
MADPT
MADPT

Reputation: 97

Two background images separated diagonally

It's possible to have two background images separated diagonally with CSS?

I know how to make it only with one image but I couldn't do it with two images.

Here's an example:

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

Thank you in advance.

UPDATE

It has to be responsive, cross-browser and only with CSS (if possible).

DEMO of what I'm looking (one image only)

Upvotes: 2

Views: 1422

Answers (4)

zyrup
zyrup

Reputation: 73

Here is an approach with a mixture of svg/css/js code, using svg patterns: http://codepen.io/anon/pen/aBbGjm

It's vertically and horizontally responsive (though only vert. on codepen).

It had worked for me on newer versions of safari/firefox/chrome and on IE10 and IE11, as well as on the android browser 4.1.2.

Though this approach doesn't work solely with css, svg patterns have many interesting features which might be additionally useful: 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>

Upvotes: 3

zyrup
zyrup

Reputation: 31

Check this CSS and JS solution: https://jsfiddle.net/u7hf0y1g/ It does not generate a division between the bottom left and the upper right corner but it creates a responsive division.

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;
}

Credits: detomon-monoxid, iamso.io, Luisa Low Pew

Upvotes: 3

Sean Stopnik
Sean Stopnik

Reputation: 1868

You can use clip-path to do this:

.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>

Upvotes: 1

Sanova
Sanova

Reputation: 541

use 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; }

Upvotes: 1

Related Questions