< Back to Frontend Friday Folks Index

Rose

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 (960 characters)
1 
<div class="beige f"></div>
2 
<div class="beige e"></div>
3 
<div class="blue d"></div>
4 
<div class="blue c"></div>
5 
<div class="blue b"></div>
6 
<div class="blue a"></div>
7 
<style>
8 
  body {
9 
    background: #191919;
10 
  }
11 
  .blue {
12 
    background: #4F77FF;
13 
  }
14 
  .beige {
15 
    background: #F9E492;
16 
    border: 0;
17 
  }
18 
  div {
19 
    position: fixed;
20 
    border: 10px solid #191919;
21 
    border-radius: 50%;
22 
    height: 30px;
23 
    width: 30px;
24 
  }
25 
  .a {
26 
    top: 35px;
27 
    left: 175px
28 
  }
29 
  .b {
30 
    border-radius: 15px 15px 35px 35px;
31 
    top: 55px;
32 
    left: 140px;
33 
    width: 100px;
34 
  }
35 
  .c {
36 
    border-radius: 15px 15px 35px 35px;
37 
    top: 75px;
38 
    left: 120px;
39 
    width: 140px;
40 
  }
41 
  .d {
42 
    border: 0;
43 
    top: 65px;
44 
    left: 150px;
45 
    height: 100px;
46 
    width: 100px;
47 
  }
48 
  .e {
49 
    top: 145px;
50 
    left: 180px;
51 
    height: 40px;
52 
    width: 40px;
53 
  }
54 
  .f {
55 
    border-radius: 10px;
56 
    top: 155px;
57 
    left: 190px;
58 
    height: 100px;
59 
    width: 20px;
60 
  }
61 
</style>
62
Thanks to Dan Ott, I learned something new about border-radius this time! The border itself counts towards the border-radius. So to see any radius, it needs to be at least as thick as the border itself to be visible. It may also lead to different "angles" of the border, but I need to research that at some point...
< Back to Frontend Friday Folks Index