JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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