< Back to Frontend Friday Folks Index

Stairway

Highlighted solution (663 characters)
1 
<div><div></div><div></div><div></div><div></div><div></div><div></div></div>
2 
<style>
3 
  body{display:grid;place-items:center;background:#191919}
4 
  body>div {
5 
    width: 100;
6 
    height: 150;
7 
    background: #4F77FF;
8 
    border-radius: 50px 50px 0 0;
9 
    display: flex;
10 
    place-items:end;
11 
    position:relative;
12 
    --num: 0;
13 
  }
14 
  div:nth-child(1) {--num: 1}
15 
  div:nth-child(2) {--num: 2}
16 
  div:nth-child(3) {--num: 3}
17 
  div:nth-child(4) {--num: 4}
18 
  div:nth-child(5) {--num: 5}
19 
  div + div {
20 
    width: 99%;
21 
    height: 20;
22 
    position:absolute;
23 
    background: #191919;
24 
    bottom:calc((var(--num) - 1) * 24px);
25 
    left:calc(var(--num) * 20px);
26 
  }
27 
</style>
We had to stop solving this due to time constraints and before we actually got somewhere. I've tried looking into counters and using that as a variable. Turns out, this is not possible to use a counter inside a calc right now. To still make it work somewhat, I've used a variable.
< Back to Frontend Friday Folks Index