< Back to Frontend Friday Folks Index

Batmicky

Highlighted solution (866 characters)
1 
<div></div>
2 
<style>
3 
  body {background: #191919;display:grid;place-items:center}
4 
  div {
5 
    width: 250px;
6 
    height: 100px;
7 
    position:relative;
8 
    background:
9 
      radial-gradient(circle at 66px 160px, #191919 100px, #0000 0),
10 
      radial-gradient(circle at 185px 160px, #191919 100px, #0000 0),
11 
      radial-gradient(circle at 100% 50px, #191919 50px, #0000 0),
12 
      radial-gradient(circle at 0px 50px, #191919 50px, #0000 0),
13 
      #F2AD43;
14 
  }
15 
  div::before {
16 
    position:absolute;
17 
    inset: 0 85px 70px;
18 
    content: '';
19 
    background:
20 
      radial-gradient(circle at 30px 10px, #F2AD43 5px, #0000 0),
21 
      radial-gradient(circle at 50px 10px, #F2AD43 5px, #0000 0),
22 
      linear-gradient(#191919 10px, #0000 0),
23 
      linear-gradient(to right,#191919 30px, #F2AD43 0 50px, #191919 0),
24 
      #191919;
25 
    border-radius: 0 0 10px 10px;
26 
  }
27 
</style>
28
Again, having lots of fun with gradients!
Highlighted solution (837 characters)
1 
<div></div>
2 
<style>
3 
  body {background: #191919;display:grid;place-items:center}
4 
  div {
5 
    width: 250px;
6 
    height: 100px;
7 
    position:relative;
8 
    background:
9 
      radial-gradient(circle at 66px 160px, #191919 100px, #0000 0),
10 
      radial-gradient(circle at 185px 160px, #191919 100px, #0000 0),
11 
      radial-gradient(circle at 100% 50px, #191919 50px, #0000 0),
12 
      radial-gradient(circle at 0px 50px, #191919 50px, #0000 0),
13 
      #F2AD43;
14 
  }
15 
  div::before {
16 
    position:absolute;
17 
    inset: 0 85px 70px;
18 
    content: '';
19 
    background:
20 
      radial-gradient(circle at 30px 10px, #F2AD43 5px, #0000 0),
21 
      radial-gradient(circle at 50px 10px, #F2AD43 5px, #0000 0),
22 
      linear-gradient(to right,#191919 30px, #F2AD43 0 50px, #191919 0) 0 10px no-repeat,
23 
      #191919;
24 
    border-radius: 0 0 10px 10px;
25 
  }
26 
</style>
27
There is a minor improvement with this, by moving the background position down by 10px using no-repeat.
Highlighted solution (818 characters)
1 
<div></div>
2 
<style>
3 
  body {background: #191919;display:grid;place-items:center}
4 
  div {
5 
    width: 250px;
6 
    height: 100px;
7 
    position:relative;
8 
    background:
9 
      radial-gradient(circle at 66px 160px, #191919 100px, #0000 0),
10 
      radial-gradient(circle at 185px 160px, #191919 100px, #0000 0),
11 
      radial-gradient(circle at 100% 50px, #191919 50px, #0000 0),
12 
      radial-gradient(circle at 0px 50px, #191919 50px, #0000 0),
13 
      #F2AD43;
14 
  }
15 
  div::before {
16 
    position:absolute;
17 
    inset: 0 85px 70px;
18 
    content: '';
19 
    background:
20 
      radial-gradient(circle at 30px 10px, #F2AD43 5px, #0000 0),
21 
      radial-gradient(circle at 50px 10px, #F2AD43 5px, #0000 0),
22 
      conic-gradient(#F2AD43,#F2AD43) 30px 10px / 20px 20px no-repeat,
23 
      #191919;
24 
    border-radius: 0 0 10px 10px;
25 
  }
26 
</style>
27
If using background size, it will let us save a few more characters. Still, it needs some kind of gradient to create an image first that can be set with background size. conic-gradient saves another char vs radial and linear. The no-repeat is still necessary, to ensure the square won't fill the whole background again by repeating itself.
< Back to Frontend Friday Folks Index