< Back to Frontend Friday Folks Index

Chevron

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 (410 characters)
1 
<div o>
2 
<div a></div>
3 
<div b></div>
4 
<div c></div>
5 
</div>
6 
<style>
7 
  body {
8 
    background: #6592CF;
9 
  }
10 
  [o]{
11 
    -webkit-box-reflect:right;
12 
    width: 50%;
13 
  }
14 
  [a],[b],[c] {
15 
    position: absolute;
16 
    top:50%;
17 
    right:50%;
18 
    background: linear-gradient(38.5deg, #0000 78px, #293D7E 0 102px, #0000 0);
19 
    height: 100px;
20 
    width: 125px;
21 
  }
22 
  [b]{
23 
    top:100px;
24 
  }
25 
  [c]{
26 
    top:50px;
27 
  }
28 
</style>
29

I had multiple, different solutions to this puzzle. One of them was using a linear-gradient in three elements and a -webkit-box-reflect to mirror them to the right.

Highlighted solution (509 characters)
1 
<div a></div>
2 
<div b></div>
3 
<div c></div>
4 
<div d></div>
5 
<div e></div>
6 
<div f></div>
7 
<style>
8 
  body {
9 
    background: #6592CF;
10 
    display: grid;
11 
    place-items: center;
12 
    margin-top:146px;
13 
  }
14 
  div {
15 
    border-left: 125px solid #0000;
16 
    border-right: 125px solid #0000;
17 
    border-top: 100px solid var(--c,#293D7E);
18 
    margin-top: var(--t,0);
19 
    width: 0;
20 
  }
21 
  [b] {--t:-175px;--c:#6592CF}
22 
  [c] {--t:-230px}
23 
  [d] {--t:-306px;--c:#6592CF}
24 
  [e] {--t:-360px}
25 
  [f] {--t:-440px;--c:#6592CF}
26 
</style>
27

This idea used a set of 6 triangles. Basically three borders set transparent and one being drawn out, to create a triangle and then stacked those on top of each other.

I also thought about rotating a div, but since the angle is not 90 degrees, that solution lead to nothing...

< Back to Frontend Friday Folks Index