JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mainkite">
  <div class="midLine"></div>
</div>

CSS

.mainkite{
  width:200px;
  height:200px;
  background:#f00;
  transform: skew(180deg,180deg) rotate(45deg);
  position: relative;
  margin: 0px auto;
  margin-top: 50px;
  overflow: hidden;
 }
 .midLine{
   border: solid 1px #000;
   transform: skew(180deg,180deg) rotate(45deg);
   position: absolute;
   top: 99px;
   width: 140%;
   left: -41px;
 }