JSFiddle - React, Tailwind, and code Playground

HTML

<div class="complete-kite">
  <div class="mainkite">
    <div class="midLine"></div>
    <div class="arc"></div>
  </div>
  <div class="tale"></div>
</div>

CSS

.complete-kite{
  width: 200px;
  height: 200px;
  margin: 0px auto;
  position: relative;
}
.mainkite{
  width:200px;
  height:200px;
  background:#f00;
  transform: rotate(45deg);
  position: relative;
  margin: 0px auto;
  margin-top: 50px;
  overflow: hidden;
}
.midLine{
  border: solid 1px #000;
  transform: rotate(45deg);
  position: absolute;
  top: 99px;
  width: 140%;
  left: -41px;
}
.arc{
  border: solid 2px #000;
  position: absolute;
  width: 200%;
  border-radius: 50%;
  height: 200%;
}
.tale {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid black;
  position: absolute;
  left: 50%;
  bottom: -90px;
  transform: translateX(-50%);
}