JSFiddle - React, Tailwind, and code Playground

by Yaroslav Ivanov

HTML

<div class="parent">
  <div class="block">
    <div class="angle"></div>
  </div>
</div>

CSS

.angle {
  width: 500px;
  height: 500px;
  border: 1px solid #0f0;
  transform: rotateZ(135deg);
  margin-top: -100px;
}

.block {
  overflow: hidden;
  border: 1px solid #0f0;
  width: 349px;
  height: 150px;
  transform: rotateZ(45deg);
  margin-top: 68px;
}

.parent {
  transform: rotateZ(-45deg);
  overflow: hidden;
  width: 500px;
  height: 500px;
  margin-top: -140px;
  margin-left: 80px;
}