CSSBattle 1.9: Tesseract Solution

Approach

Center and stack elements

Implementation

1<div class="container">
2  <div class="child child-1"></div>
3  <div class="child child-2"></div>
4  <div class="child child-3"></div>
5</div>
6<style>
7  body {
8    background: #222730;
9    display: flex;
10    justify-content: center;
11    align-items: center;
12    margin: 0;
13  }
14
15  .container {
16    width: 100%;
17    height: 150px;
18    background: #4caab3;
19    position: relative;
20  }
21
22  .child {
23    position: absolute;
24    top: 50%;
25    left: 50%;
26    transform: translate(-50%, -50%) rotate(45deg);
27  }
28
29  .child-1 {
30    background: #222730;
31    width: 250px;
32    height: 250px;
33  }
34
35  .child-2 {
36    background: #4caab3;
37    width: 150px;
38    height: 150px;
39  }
40
41  .child-3 {
42    background: #393e46;
43    width: 50px;
44    height: 50px;
45    border-radius: 100%;
46  }
47</style>