< Back to Frontend Friday Folks Index

Spikes

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 (396 characters)
1 
<div></div>
2 
<div></div>
3 
<div></div>
4 
<div></div>
5 
<style>
6 
  body{display:grid;grid-template-columns:50% 50%;gap:20px 10px;margin:100 115;background:#E3516E}
7 
  div {
8 
    width: 75px;
9 
    height: 40px;
10 
    border-radius: 0 20px 20px;
11 
    clip-path:polygon(4px 0, 44px 100%, 100% 100%,100% 0);
12 
    background: #D9D9D9;
13 
  }
14 
  div+div{scale:-1 1}
15 
  div+div+div{scale:1 -1}
16 
  div+div+div+div{scale:-1 -1}

A weird clip-path. I didn't use gradients and Meg beat me to it. Ouch!

< Back to Frontend Friday Folks Index