< 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 
<div></div>
2 
<style>
3 
  body {
4 
    border: 20px solid #54C144;
5 
    background:conic-gradient(at 145px 180px, #C74E4E .4turn,#FFFFFF 0 .6turn,#54C144 0 .75turn,#C74E4E 0);
6 
    margin:0;
7 
  }
8 
  div {
9 
    background: #000;
10 
    height:100%;
11 
    clip-path: shape(
12 
      evenodd
13 
      from 0 0, hline by 100%, vline by 100%, hline to 0, move to 40px 40px, hline by 80px, vline by 40px, hline by -80px, move to 160px 40px, hline by 80px, vline by 40px, hline by -80px, move to 40px 120px, hline by 200px, vline by 40px, hline by -200px, move to 280px 40px, hline by 40px, vline by 180px, hline by -40px, move to 40px 180px, hline by 40px, vline by 10px, hline by -10px, vline by 5px, hline by 20px, vline by 10px, hline by -20px, vline by 5px, hline by 10px, vline by 10px, hline by -40px, vline by -10px, hline by 10px, vline by -20px, hline by -10px, move to 100px 195px, hline by 10px, vline by 10px, hline by -10px, move to 120px 195px, hline by 10px, vline by 10px, hline by -10px);
14 
  }
15 
</style>
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 
<div></div>
2 
<style>
3 
  body {
4 
    border: 20px solid #54C144;
5 
    background:conic-gradient(at 145px 180px, #C74E4E .4turn,#FFFFFF 0 .6turn,#54C144 0 .75turn,#C74E4E 0);
6 
    margin:0;
7 
  }
8 
  div {
9 
    background: #000;
10 
    height:100%;
11 
    clip-path: shape(
12 
      evenodd
13 
      from 0 0, move to 40px 40px, hline by 80px, vline by 40px, hline by -80px, move to 160px 40px, hline by 80px, vline by 40px, hline by -80px, move to 40px 120px, hline by 200px, vline by 40px, hline by -200px, move to 280px 40px, hline by 40px, vline by 180px, hline by -40px, move to 40px 180px, hline by 40px, vline by 10px, hline by -10px, vline by 5px, hline by 20px, vline by 10px, hline by -20px, vline by 5px, hline by 10px, vline by 10px, hline by -40px, vline by -10px, hline by 10px, vline by -20px, hline by -10px, move to 100px 195px, hline by 10px, vline by 10px, hline by -10px, move to 120px 195px, hline by 10px, vline by 10px, hline by -10px);
14 
  }
15 
</style>
16

Here you can see what the clip-path actually cuts while the colors are done by a conic-gradient..

< Back to Frontend Friday Folks Index