JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div class='triangle'><img src='http://t1.uccdn.com/en/images/8/3/1/img_why_does_my_cat_meow_so_much_3138_100_square.jpg'></div>
    <div class='triangle second'><img src='http://t1.uccdn.com/en/images/8/3/1/img_why_does_my_cat_meow_so_much_3138_100_square.jpg'></div>

CSS

body{
    background:#1267ac;
}
.triangle{
   transform:rotate(45deg);
    position:relative;
    width:100px;
    height:100px;
    left:50px;
    top:50px;
    overflow:hidden;
}
.triangle:after{
    position:absolute;
    content:' ';
    border:50px solid transparent;
    border-bottom-color:#1267ac;
    border-right-color:#1267ac;
}
.triangle img{
    transform:rotate(-45deg);
    position:absolute;
    top:-30px;
    left:-30px;
    height:150px;
    width:150px;
}
.second{
    transform:rotate(225deg);
    left:125px;
    top:-120px;
}