JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page-wrapper">
<div class="outter-wrapper">
<div class="inner-wrapper">
</div>
</div>
</div>

CSS

.page-wrapper {
    position: absolute; 
    overflow: hidden; 
    width: 400px; 
    height: 300px; 
    top: 50px; 
    left: 50px; 
    right: auto; 
    z-index: 12;
    background-color: blue;
}
.outter-wrapper {
    position: absolute;
    overflow: hidden;  
    transform-origin: 100% 50%; 
    transform: translateX(-20px) rotate(45deg);
    right: 0px;
    bottom: -100%;
    width: 200%;
    height: 200%;
}
.inner-wrapper {
    transform-origin: 100% 100%; 
    transform: rotate(-45deg) translateX(20px);
    background-color: yellow;
    width: 50%;
    height: 50%;
    right: 0px;
    position: absolute;
    top: 0px;
}