< 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