Diagonally split/combine div/image with CSS
<p>I'm trying to achieve something like the following:</p>

<p><a href="https://i.stack.imgur.com/lqS1I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lqS1I.png" alt="enter image description here"></a></p>

<p>The diagonal split should go from the top right corner to the bottom left corner, at an exact angle so that both sides are totally equally proportioned.</p>

<p>I found an example online, but it was for wide aspect images, while trying to modify it to fit my 1:1 ratio purpose, I can't seem to get the bottom image to line up properly, but the top one works fine.</p>

<p>The diagonal split is also off-center, and the yellow background is there to show the area that should be filled by the lower image. The lower image should be the same size as the top one, just with the bottom half instead of the top half showing.</p>

<p>I have created a fiddle to demonstrate: <a href="https://jsfiddle.net/uxuv17at/2/" rel="nofollow noreferrer">https://jsfiddle.net/uxuv17at/2/</a></p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="split-image-container"&gt;
    &lt;div class="split-image-bottom"&gt;
        &lt;img src="https://merkd.com/usr/members/icons/thumb.php?src=1435366066.9.png&amp;w=300" alt="Just Another Clan" title="Just Another Clan" /&gt;
    &lt;/div&gt;
    &lt;img src="https://merkd.com/usr/teams/icons/thumb.php?src=1441676463.1.jpg&amp;w=300" alt="ExtraordinaryKillers" title="ExtraordinaryKillers" /&gt;
&lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.split-image-container{
    height: 300px;
    width: 300px;
    overflow: hidden;
    position: relative;
    border: 1px solid black;
    padding: 0;
    background-color: green;
}
/*Rotate this div and position it to cut the rectangle in half*/
.split-image-bottom{
    transform: rotate(315deg);
    position: absolute;
    top: 85px;
    left: 70px;
    overflow: hidden;
    height: 350px;
    width: 350px;
    background: yellow;
}
/*Apply exact opposite amount of rotation to the .image2 class so image appears straight */
/*Also align it with the top of the rectangle*/
.split-image-bottom img{
    transform: rotate(45deg);
    position: absolute;
    top: -50px;
    left: 15px;
}
</code></pre>