Working Example
HTML
<div id="content">
{block:Posts}
{block:Photo}
<div class="wrapper-{block:Odd}top{/block:Odd}{block:Even}bot{/block:Even}">
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />
</div>
{/block:Photo}
{/block:Posts}
</div>
CSS
#content {
background-color:#fff;
width: 1000px;
}
.wrapper-top {
position: absolute;
width: 250px;
height: 420px;
display: inline-block;
background-color:blue;
-webkit-clip-path: polygon(50% 100%, 100% 50%, 50% 0, 0 50%);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.wrapper-bot {
position: relative;
display: inline-block;
width: 250px;
height: 420px;
top: 210px;
left: 125px;
background-color:red;
-webkit-clip-path: polygon(50% 100%, 100% 50%, 50% 0, 0 50%);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#content img {
height: 420px;
width: 250px;
}
Here is a JSFiddle to demonstrate.
Now, all that said, you're going to run into trouble if a photo doesn't have a HighRes URL and you'll have to figure out how to deal with non-photo posts.