CSS Diamond Recursive HYPNO

HTML

<div class="box parent"><div class="box"><div class="box"><div class="box"></div></div></div></div>

CSS

.box {
    padding: 0;
    width: 100%;
    height: 100%;
    border-top: double 40px red;
    border-left: double 40px blue;
    border-bottom: double 40px green;
    border-right: double 40px orange;
    border-radius: 10px;
    box-sizing: border-box;
}

.box.parent {
    margin: 100px;
    height: 400px;
    width: 400px;
    -webkit-transform: rotate(-45deg);
    
    -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         10s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(360deg);
  }
}