< Back to Frontend Friday Folks Index

Max Volume

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