<div></div>
<div></div>
<div></div>
<div></div>
body {
  display: flex;
  align-items: center;
  width: 100vw;
  min-height: 100vh;
}
div {
  margin: 20px auto;
  border: 2px solid red;
  height: 50vh;
  width: calc(1.41 * 50vh);
  overflow: hidden;
  position: relative;
  
  &::before {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    background: #0089ff;
  }
  
  &:nth-child(1)::before {
    transform: rotate(45deg);
    transform-origin: left bottom;
  }
  
  &:nth-child(2)::before {
    transform: rotate(-45deg);
    transform-origin: left top;
  }
  
  &:nth-child(3) {
    width: 50vh;
    height: calc(1.41 * 50vh);
    
    &::before {
      transform: rotate(45deg);
      transform-origin: left top;
    }
  }
  
  &:nth-child(4) {
    width: 50vh;
    height: calc(1.41 * 50vh);
    
    &::before {
      transform: rotate(-45deg);
      transform-origin: right top;
    }
  }
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.