Two trapeze aside in css3 - image

Question

I have a small issue about css3 and trapeze. I have two square images side by side (float left each - white dots) and I want them to look like this :
How would you do it? Is it possible?

Answer 1

If the pic1 is a .png and the negative space created by the angle of the trapeze edge is transparent, then this should work:
#pic1, #pic2 {
float: left;
position: relative;
}
#pic1 {
z-index: 2;
}
#pic2 {
right: 30px; /* Or whatever the difference in image sizes is */
}

Answer 2

You can use the CSS triangle trick with the transparent borders
html
<div class="pic pic-1">Pic 1</div>
<div class="pic pic-2">Pic 2</div>
css
.pic{
width:100px;
height:100px;
float:left;
text-align:center;
line-height:100px;
color:white;
position:relative;
}
.pic-1{
background:orange;
}
.pic-2{
background:limegreen;
}
.pic:after{
content:'';
display:block;
position:absolute;
height:0;
width:0;
z-index:10;
}
.pic-1:after{
top:0;
right:-10px; /* must match the border left */
border-left: 10px solid orange; /*play with width to change angle*/
border-bottom:50px solid transparent;
}
.pic-2:after{
bottom:0;
left:-10px; /* must match the border right*/
border-right: 10px solid limegreen;/*play with width to change angle*/
border-top:50px solid transparent;
}
Demo at http://jsfiddle.net/gaby/eh2f3/

Answer 3

First of all you begin setting a strip that will cut alogn the top and botom borders, and where you will place the images:
.demo1 {
overflow-y: hidden;
}
Inside, there will be the base elements, that are floated left,
.base {
width: 100px;
height: 100px;
float: left;
}
Inside, a clipping element rotated:
.demo1 .clip {-webkit-transform: rotate(15deg);}
.clip {
height: 177%;
width: 125%;
margin-top: -40%;
-webkit-transform-origin: 0% 50%;
overflow: hidden
}
and inside, the image, counter-rotated
.demo1 .inner {
-webkit-transform: rotate(-15deg);
}
.inner {
-webkit-transform-origin: 0% 50%;
margin-left: -151%;
margin-top: 19%;
}
The html is :
WEBKITTED DEMO
webkitted means that only webkit prefixes are used :-)
Since somebody out there was offering 1 milliion points, I decided to do an extra effort. See the second strip (demo2) where the rotations are specified thru nth-child(). That allows to get different angles for every transition.
Full CSS :
.demo1, .demo2 {
overflow-y: hidden;
}
.base {
width: 100px;
height: 100px;
float; left;
}
.clip {height: 177%; width: 125%; margin-top: -40%;-webkit-transform-origin: 0% 50%; overflow: hidden}
.inner {-webkit-transform-origin: 0% 50%;margin-left: -151%;margin-top: 19%;}
.terminator {background-color: white}
.demo1 .clip {-webkit-transform: rotate(15deg);}
.demo1 .inner {-webkit-transform: rotate(-15deg);}
.demo2 :nth-child(odd) .clip {-webkit-transform: rotate(15deg);}
.demo2 :nth-child(odd) .inner {-webkit-transform: rotate(-15deg);}
.demo2 :nth-child(even) .clip {-webkit-transform: rotate(-15deg);}
.demo2 :nth-child(even) .inner {-webkit-transform: rotate(15deg);margin-left: -151%;margin-top: -30%;}
Note the calculus to place the images accurately are strange; I end doing it by trial and error. Also, you need images with plenty of margin to be cutted without losing the point of interest.