< Back to Frontend Friday Folks Index

Stripes

Highlighted solution (694 characters)
1 
<div class="b">
2 
<div></div>
3 
<div></div>
4 
<div></div>
5 
<div></div>
6 
<div></div>
7 
<div></div>
8 
<div></div>
9 
<div></div>
10 
<div></div>
11 
</div>
12 
<div class="l"></div>
13 
<div class="r"></div>
14 
<style>
15 
  body {
16 
    margin: 0;
17 
    background: #1A4341;
18 
    display: grid;
19 
    place-items: center;
20 
  }
21 
  .b {
22 
    width: 100%;
23 
    height: 180px;
24 
  }
25 
  .b div {
26 
    background: #F3AC3C;
27 
    height: 20px;
28 
  }
29 
  .b div:nth-child(even) {
30 
    background: #1A4341;
31 
    height: 20px;
32 
  }
33 
  .l,.r {
34 
    position: absolute;
35 
    background: #1A4341;
36 
    border-radius: 0 150px 150px 0;
37 
    left: 0;
38 
    height: 300px;
39 
    width: 150px;
40 
  }
41 
  .r {
42 
    border-radius: 150px 0 0 150px;
43 
    left: unset;
44 
    right: 0;
45 
  }
46 
</style>

This was a hard one! We initially created this solution with less divs, but this was always ending up in a 99.9% solution - even when the Diff view showed up almost completely black. Only when we zooming in the black diff-preview, we could see tiny discrepancies, but they weren't even solvable by incrementing by half-pixel values or similar.

Very frustrating experience - it looks like sometimes you need to find a special way how to solve it. We still don't get, why this solution would be different to the one hundred percent solution below.

Highlighted solution (253 characters)
1 
<style>
2 
  body {
3 
    background:
4 
      radial-gradient(circle, #1A4341 50vh, transparent 0) -50vw,
5 
      linear-gradient(#1A4341 0 60px, transparent 0 240px, #1A4341 0),
6 
      repeating-linear-gradient(#1A4341 0 20px, #F3AC3C 0 40px)
7 
    ;
8 
  }
9 
</style>
With this solution, achieving the 100% were no problem. I think I would have gone for this in the first place, but solving everything with gradients almost seems to be cheating to me now.
Highlighted solution (211 characters)
1 
<style>
2 
  body {
3 
    border: 52px solid #1A4341;
4 
    background:
5 
      radial-gradient(circle,#1A4341 50vh,transparent 0) -50vw,
6 
      repeating-linear-gradient(#1A4341 0 20px,#F3AC3C 0 40px)
7 
    ;
8 
  }
9 
</style>
There was another solution, which improved the character count a bit, by using a border on the body instead of the transparent linear-gradient. Not much has changed otherwise, but it's good to see that sometimes you can solve things differently. Still 100% with this approach. When zooming in, I can't really see a difference to the 99% solution. I believe the circles to the side somehow are calculated differently in the 99% solution then.
< Back to Frontend Friday Folks Index