< Back to Frontend Friday Folks Index

Space Invaders

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 (998 characters)
1 
<div class="grid">
2 
  <div class="ship"></div>
3 
  <div class="ship"></div>
4 
  <div class="ship"></div>
5 
  <div class="ship"></div>
6 
  <div class="ship y"></div>
7 
  <div class=""></div>
8 
  <div class="ship y"></div>
9 
  <div class="ship y"></div>
10 
</div>
11 
<style>
12 
  body {
13 
    background:
14 
      conic-gradient(#2CE1EA) 50% 210px / 10px 10px no-repeat,
15 
      conic-gradient(#2CE1EA) 50% 240px / 10px 10px no-repeat,
16 
      conic-gradient(#2CE1EA) 50% 270px / 10px 15px no-repeat,
17 
      conic-gradient(#0000 135deg,#2CE1EA 0 225deg, #0000 0) 169.5px 249px / 60px 60px no-repeat,
18 
      #071945;
19 
  }
20 
  .ship {
21 
    width: 70px;
22 
    height: 20px;
23 
    background: #dd6b4d;
24 
  }
25 
  .grid {
26 
    display: grid;
27 
    grid-template-columns: repeat(4, 70px);
28 
    gap: 30px 20px;
29 
    position: absolute;
30 
    top: 40;
31 
    left: 30;
32 
  }
33 
  .ship {
34 
    --c: #B069F7;
35 
    background: conic-gradient(var(--c) 90deg,transparent 0 180deg,var(--c) 0 270deg,transparent 0) -40px 50% / 100px 100%;
36 
  }
37 
  .y {
38 
    --c: #F8DA37;
39 
  }
40 
</style>

Hannah joined us for the first time! While she used clip-path to shape the invaders, I've been using a conic-gradient and had to move it around quite a bit to finally get to 100%.

< Back to Frontend Friday Folks Index