< Back to Frontend Friday Folks Index

Tunnel

Highlighted solution (414 characters)
1 
<div><div><div></div></div></div>
2 
<style>
3 
  body,div {
4 
    background: #6592CF;
5 
    display: grid;
6 
    place-items: center;
7 
    rotate: -15deg;
8 
  }
9 
  div {
10 
    background: #243D83;
11 
    height: 250px;
12 
    width: 250px;
13 
    rotate: 15deg;
14 
  }
15 
  div > div {
16 
    background: #6592CF;
17 
    height: 150px;
18 
    width: 150px;
19 
  }
20 
  div > div > div {
21 
    background: #243D83;
22 
    height: 75px;
23 
    width: 75px;
24 
  }
25 
</style>
26
Ok, I initially thought that ::before and ::after could be used for nesting. But that's not really the case, so the rotation after rotating is not possible easily.
< Back to Frontend Friday Folks Index