JSFiddle - React, Tailwind, and code Playground

HTML

<div id="triangleholder">
  <div id="triangle">
  </div>
</div>

CSS

#triangleholder {
  width: 150px;
  height: 150px;
  border: 1px solid red;
}
#triangle {
    position: relative;
    height: 75px;
    overflow: hidden;
}
#triangle:before {
    content: '';
    position:absolute;
  width: 106px;
  height: 106px;
        background:blue;
  transform: rotate(45deg)translateX(29%);
  cursor: pointer;
}