JSFiddle - React, Tailwind, and code Playground

HTML

<div class='square one'></div>
<br><br>
<div class='square two'></div>

CSS

.square{
  width:40px;
  height:40px;
  border:10px solid green;
  border-top: 20px solid black;
}
.one{
  border-top: 20px solid black;
}
.two:before{
   content:'';
   display:block;
   width:60px;
   border-top:20px solid black;
   position:relative;
   left:-10px;
   top:-20px;
}