How to build a special polygon a kite shape with HTML CSS only

Question

I'm working on my new project and in this I need some irregular structures. One of them is: 

What I achieved is:

.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;
}

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

How can I get the rest of the shape I desire?

Answer 1

I made two divs, one for Arc and one for Tail. Because mainkite overflow is set to hidden, I wrapped mainkite and tale in a single div to appropriately position the tail.