< Back to Frontend Friday Folks Index

Sheep

Highlighted solution (933 characters)
1 
<div>
2 
<div>
3 
<div></div>
4 
</div>
5 
</div>
6 
<style>
7 
  body {
8 
    display:grid;place-items:center;background:#243D83
9 
  }
10 
  div {
11 
    width: 140px;
12 
    height: 140px;
13 
    background: #6592CF;
14 
    border-radius:35px;
15 
    rotate:45deg;
16 
  }
17 
  body>div>div {
18 
    scale: 0.96;
19 
    width: 140px;
20 
    height: 140px;
21 
  }
22 
  body>div>div>div {
23 
    rotate:-90deg;
24 
    background:
25 
      radial-gradient(circle at 60px 55px,#6592CF 5px,#0000 0) 0 0 no-repeat,
26 
      radial-gradient(circle at 80px 55px,#6592CF 5px,#0000 0) 0 0 no-repeat,
27 
      radial-gradient(circle at 30px 30px,#6592CF 25px,#0000 0) 0 0 no-repeat,
28 
      radial-gradient(circle at 110px 30px,#6592CF 25px,#0000 0) 0 0 no-repeat,
29 
      radial-gradient(circle at 70px 10px,#6592CF 25px,#0000 0) 0 0 no-repeat,
30 
      radial-gradient(circle at 70px 65px,#243D83 31px,#0000 0) 0 0 no-repeat,
31 
      linear-gradient(to bottom,#243D83 50px,#0000 0) 50% 10px / 60px no-repeat
32 
    ;
33 
  }
34 
</style>
35
This one is again something I only got 99.9% for. David has seen this as two divs with one rotated 45 degrees. I thought of having eight circles on the outside but when looking at it more closely, it seems like circles wouldn't fit.
< Back to Frontend Friday Folks Index