Как объединить два изображения по диагонали с помощью CSS/JavaScript?

Question

Можно ли сделать это с помощью CSS и, возможно, JavaScript, если необходимо?

Я хочу, чтобы содержимое внутри этого треугольника div (image1/2.jpg) было 2 разными div, так как я хочу сделать их ссылками на 2 разных страницы.

Answer 1

Вы можете сделать это с абсолютным позиционированием:

http://jsfiddle.net/4wutsrs3/

<div class="con"> 
    <div class="lft"></div> 
    <div class="rgt"></div> 
    <div class="lft-lbl">lft-lbl</div> 
    <div class="rgt-lbl">rgt-lbl</div>  
</div> 

.con { width:200px; position:relative; } 

.lft { width:0; height:0; position:absolute; top:0; left:0; 
     border-style:solid; 
     border-width:200px 0 0 200px; 
     border-color:transparent transparent transparent orange; 
} 

.rgt { width:0; height:0; position:absolute; top:0; right:0; 
     border-style:solid; 
     border-width:0 200px 200px 0; 
     border-color:transparent #007bff transparent transparent; 
} 

.lft-lbl { position:absolute; top:160px; left:20px; } 

.rgt-lbl { position:absolute; top:20px; right:20px; z-index:99; } 

Answer 2

Использование HTML холст и кинетическими JS вы должны быть в состоянии достичь этого:

JavaScript

var c = $('#canvas').get(0).getContext("2d"), 
    imageOne = $('#imageOne').get(0), 
    imageTwo = $('#imageTwo').get(0), 
    pattern1 = c.createPattern(imageOne,"no-repeat"), 
    pattern2 = c.createPattern(imageTwo,"no-repeat"); 

c.canvas.width = 400; // width of rectangle 
c.canvas.height = 400; // height of rectangle 

c.fillStyle = pattern1; 
c.beginPath(); 
c.moveTo(0, 0); // top left 
c.lineTo(400, 0); // top right 
c.lineTo(400, 400); // bottom right 
c.closePath(); 
c.fill(); 

c.fillStyle = pattern2; 
c.beginPath(); 
c.moveTo(0, 0); // top left 
c.lineTo(0, 400); //bottom left 
c.lineTo(400, 400); // bottom right 

c.closePath(); 
c.fill(); 

HTML

<canvas id="canvas"> 
    <img id="imageOne" src="http://lorempixel.com/400/400/city/1" /> 
    <img id="imageTwo" src="http://lorempixel.com/400/400/city/2" /> 
</canvas> 

Fiddle Example

Images going to different corner

Answer 3

Грубо я этого хотел. Есть еще пара вещей, которые мне не нравятся, но я знаю, как с ними справиться. Спасибо, Радио, указав мне clipping.

http://jsfiddle.net/ojcx4k03/