< Back to Frontend Friday Folks Index

Rose

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