JSFiddle - React, Tailwind, and code Playground

by Gabriele Petrioli

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;
    border-left: 10px solid orange;
    border-bottom:50px solid transparent;
}
.pic-2:after{
    bottom:0;
    left:-10px;
    border-right: 10px solid limegreen;
    border-top:50px solid transparent;
}