< Back to Frontend Friday Folks Index

Wrench

Highlighted solution (405 characters)
1 
<div class="wrap">
2 
  <div class="l"></div>
3 
  <div class="r"></div>
4 
</div>
5 
<style>
6 
  body {
7 
    background: #6592CF;
8 
    margin: 0;
9 
  }
10 
  .wrap {
11 
    inset: 30px 145px 28px;
12 
    overflow: hidden;
13 
    position: absolute;
14 
  }
15 
  .l,.r {
16 
    border: 30px solid #243D83;
17 
    border-radius: 70px;
18 
    right: 40px;
19 
    position: absolute;
20 
    height: 182px;
21 
    width: 90%;
22 
  }
23 
  .r {
24 
    left: 40px;
25 
  }
26 
</style>
That was tricky! The numbers don't really line up well and it feels like there is something off now. Usually, the numbers end with a 0 or at least 5 when using px values. I didn't want to deep dive into using other units to see whether ther is something else suited better for this.
< Back to Frontend Friday Folks Index