< Back to Frontend Friday Folks Index

Windmill

Highlighted solution (480 characters)
1 
<div></div>
2 
<div></div>
3 
<div></div>
4 
<div></div>
5 
<style>
6 
  * {
7 
    background: var(--c,#191919);
8 
  }
9 
  div {
10 
    --c: #F9E492;
11 
    position: absolute;
12 
    border-radius: 0 0 50px 50px;
13 
    top: 50%;
14 
    left: 50%;
15 
    width: 100px;
16 
    height: 50px;
17 
    rotate: calc(var(--r) * 90deg);
18 
    transform-origin: 0 0;
19 
  }
20 
  div:nth-child(1) {
21 
    --r: 1;
22 
  }
23 
  div:nth-child(2) {
24 
    --r: 2;
25 
  }
26 
  div:nth-child(3) {
27 
    --r: 3;
28 
  }
29 
  div:nth-child(odd) {
30 
    --c: #4F77FF;
31 
  }
32 
</style>
We figured out that using counters is not going to work here. Also using attr() doesn't work to not have to redundantly tell CSS which child it is.
Highlighted solution (627 characters)
1 
<div></div>
2 
<div></div>
3 
<div></div>
4 
<div></div>
5 
<style>
6 
  * {
7 
    background: var(--c,#191919);
8 
  }
9 
  body {
10 
    animation: wind 3s infinite ease-in-out;
11 
  }
12 
  div {
13 
    --c: #F9E492;
14 
    position: absolute;
15 
    border-radius: 0 0 50px 50px;
16 
    top: 50%;
17 
    left: 50%;
18 
    width: 100px;
19 
    height: 50px;
20 
    rotate: calc(var(--r) * 90deg);
21 
    transform-origin: 0 0;
22 
  }
23 
  div:nth-child(1) {
24 
    --r: 1;
25 
  }
26 
  div:nth-child(2) {
27 
    --r: 2;
28 
  }
29 
  div:nth-child(3) {
30 
    --r: 3;
31 
  }
32 
  div:nth-child(odd) {
33 
    --c: #4F77FF;
34 
  }
35 
  @keyframes wind {
36 
    0% { rotate: calc(0deg) }
37 
    100% { rotate: calc(360deg) }
38 
  }
39 
</style>
40
...but since I couldn't get it to work with counters, at least I could add an animation 😵‍💫
< Back to Frontend Friday Folks Index