< Back to Frontend Friday Folks Index

Max Volume

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 (592 characters)
1 
<div a></div>
2 
<div b></div>
3 
<style>
4 
  body {
5 
    background: #191919;
6 
    display: grid;
7 
    grid-template-columns: 50% 50%;
8 
    align-items: center;
9 
    gap: 25px;
10 
  }
11 
  div {
12 
    height: 200px;
13 
  }
14 
  [a] {
15 
    box-sizing: border-box;
16 
    background: #5DBCF9;
17 
    border: 75px solid #191919;
18 
    border-left-width: 67px;
19 
    border-right-color: #5DBCF9;
20 
    border-radius: 80px 0 0 80px;
21 
  }
22 
  [b] {
23 
    width: 100px;
24 
    background: radial-gradient(
25 
      circle at 0 50%, #0000 40px, #5DBCF9 0 50px, #0000 0 65px, #5DBCF9 0 75px, #0000 0 90px, #5DBCF9 0 100px, #0000 0
26 
    );
27 
  }
28 
</style>
29
The idea used here yielded 100%, but I'm pretty sure if you want to really get the same picture, you'd do it differently. On the image, the left side of the speaker looks circular, but when solving it like we did, it becomes more like an ellipse. To get it to a circular shape, the border sizes would have to match. It seems that this isn't the case here.
< Back to Frontend Friday Folks Index