< Back to Frontend Friday Folks Index

Evil Triangles

Highlighted solution (542 characters)
1 
<r>
2 
<div a></div>
3 
<div b></div>
4 
<div a></div>
5 
<div b></div>
6 
<div a></div>
7 
<div b></div>
8 
<div a></div>
9 
<div b></div>
10 
</r>
11 
<style>
12 
  body {
13 
    background:#191919;
14 
    display: grid;
15 
    place-items:center;
16 
  }
17 
  r{
18 
    display: grid;
19 
    place-items:center;
20 
    background: #4F77FF;
21 
    row-gap:50px;
22 
    padding-top:25px;
23 
    grid-template-columns: repeat(4, 50px);
24 
    height: 125px;
25 
  }
26 
  [a],[b] {
27 
    background: #191919;
28 
    height:50px;
29 
    width:50px;
30 
    transform: skewY(45deg);
31 
  }
32 
  [b] {
33 
    transform: skewY(-45deg);
34 
  }
35 
</style>
Satoshi had the great idea to add a background and draw black zig-zag lines on top. I've done that with grid today and it felt quite nice 😅
< Back to Frontend Friday Folks Index