1-9. Tesseract

 

<div id='item1'></div>
<div id='item2'></div>
<div id='item3'></div>
<div id='item4'></div>

<style>
*{
    margin: 0;
    padding:0;
 	background:#222730;
  }
  
body{
    width:400px;
    height:300px;
    position:relative;
  }

  div{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%); 
  }
  
  #item1{
    width:100%;
    height:150px;
    background:#4CAAB3;  
  }
  
  #item2{
    background:#222730;
    width:250px;
    height:250px;
    transform:translate(-50%, -50%) rotate(45deg);
  }
  
  #item3{
    background:#4CAAB3;
    width:150px;
    height:150px;
    transform:translate(-50%, -50%) rotate(45deg);
  }
  
    #item4{
    width:50px;
    height:50px;
    border-radius:50%;
    background:#393E46;  
  }
  
  

</style>

https://cssbattle.dev/play/9

CSSBattle