如何使用CSS / JavaScript对角组合两个图像？

Question

是否有可能使用CSS和JavaScript（如有必要）进行此操作？

我希望三角形div（image1 / 2.jpg）中的内容为2个不同的div，因为我想让它们成为2个不同页面的链接。

Answer 1

使用html canvas和kinetic 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 2

您可以通过绝对定位来实现这一目标：

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 3

我大概都想要这个。还有一些我不满意的事情，但我知道如何处理它们。感谢Radio给我指点clipping。

http://jsfiddle.net/ojcx4k03/