JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="dummy"></div>
    <div id="element">
<div class="div1">1</div>
<div class="div2"></div>
</div>
</div>

CSS

.container{
    width:20%;
    height:20%;
    position:absolute;
}
.div1{
    width:100%;    
    min-height:100%;
    border: 1px solid red;
    position:absolute;
    z-index:2;
}
.div2{
    border-color: #007bff transparent transparent transparent;
    left: 2px;
    border-style: solid;
    position:absolute;  
    z-index:1;
}

#container {
    display: inline-block;
    position: relative;
    width: 20%;
}
#dummy {
    padding-top: 100%;
}
#element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-repeat:no-repeat;
    background-size:cover;
}

JavaScript

$(document).ready(setSize());

function setSize() {
  var halfWidth = ($('.div1').width()) / 2;   
  $('.div2').css('border-width', ('50px ' + halfWidth + 'px 0 ' + halfWidth + 'px'));
  $('.div2').css('top', ($('.div1').height()));
}