Triangle Links to Form Square

CSS-only interlocking triangular links, using clip-path, that form a square.

by Brett

HTML

<div class="container">
    <a href="#red" class="red"></a>
    <a href="#blue" class="blue"></a>
</div>

SCSS

.container {
    position: relative;
    height: 400px;
    width: 400px;
    overflow: hidden;
	
    .red {
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: red;
        -webkit-clip-path: polygon(100% 0, 0 100%, 0 0);
        clip-path: polygon(100% 0, 0 100%, 0 0);
    }
    .blue {
        display: block;
        height: 100%;
        width: 100%;
        background: lightblue;
        -webkit-clip-path: polygon(100% 100%, 100% 0, 0 100%);
        clip-path: polygon(100% 100%, 100% 0, 0 100%);
    }
}