< Back to Frontend Friday Folks Index

Building Blocks

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 (590 characters)
1 
<div></div>
2 
<div b></div>
3 
<style>
4 
  &{background:#F3AC3C}
5 
  div {
6 
    position:fixed;
7 
    width: 150;
8 
    height: 100;
9 
    --r: radial-gradient(circle at 0 0, #1A4341 10px, #F3AC3C 0);
10 
    background:
11 
      var(--r) 140px 40px / 10px 10px no-repeat,
12 
      var(--r) 90px 90px / 10px 10px no-repeat,
13 
      radial-gradient(circle at 110px 60px, #F3AC3C 10px, #1A4341 0) 0 0 / 110px 60px no-repeat,
14 
      linear-gradient(#F3AC3C, #F3AC3C) 100px 50px no-repeat,
15 
      #1A4341;
16 
    border-radius: 10px;
17 
    top:65;left:65
18 
  }
19 
  [b] {
20 
    transform-origin: 90% 85%;
21 
    rotate: 180deg
22 
  }
23 
</style>
I didn't have too much time during the event, but I later came up with a solution for this puzzle. Since this was "almost" mirrored, I figured to use a div and use a rotation at a specific transform origin. To get the "inside" border radius pieces, I used cut out some radial gradients to fake them.
< Back to Frontend Friday Folks Index