JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<div class="box1">
  <div class="box2">
    <div class="box3"></div>
  </div>
</div>

CSS

.box1 {
  border:solid 1px lightgreen;
  background-color:lightgreen;
  position: relative;
  /*margin: 200px auto 0 auto;*/
}

.box2,
.box3 {
  position: absolute;
  background: #000;
  transform-origin: bottom left;
  width: 1px;
  height: 200px;
  left: 50%;
  bottom: 0;
}

.box2 {
  bottom: 0;
  right: 0;
  transform: rotate(-51.15deg);
}

.box3 {
  bottom: 0px;
  left: 1px;
  background: #F00;
  transform: rotate(102.3deg);
  /* 2x .box2 */
}