< Back to Frontend Friday Folks Index

Building Blocks

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