< Back to Frontend Friday Folks Index
< Back to Frontend Friday Folks Index
Tank
Visit the official puzzle page (affiliate link!) to play it yourself. If you buy a course from CSSBattle through my affiliate link, I receive a share of it!
Highlighted solution (991 characters)
1 | |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 | |
10 | |
11 | |
12 | |
13 | |
14 | |
15 | |
16 | |
During the regular VirtualCoffee CSSBattle, I checked whether a line through the tank and its
missiles was possible. This allowed to draw a conic gradient for all colors in the background
and using clip-path to cut out different shapes. Removing the first hline and vline values
(after the from
up to move to
) will show the gradient in the
background. See solution below:
Highlighted solution (949 characters)
1 | |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 | |
10 | |
11 | |
12 | |
13 | |
14 | |
15 | |
16 | |
Here you can see what the clip-path actually cuts while the colors are done by a conic-gradient..