4/9/2024

Score
596.22
Characters
990
4/9/2024 image
<body>
  <div class="container">
    <div class="bar"></div>
    <div class="curve">
      <div class="curve-inner"></div>
    </div>
  </div>
  <div class="absolute-box"></div>
</body>
<style>
  body {margin: 0; background: #F3AC3C;}
  .container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .bar, .curve {background: #998235;}
  .bar {
    height: 1.1rem;
    width: 5rem;
    transform: translate(0, 0.45rem);
  }
  .curve {
    width: 6.65rem;
    height: 5.9rem;
    border-radius: 0 0 2rem 2rem;
    display: flex;
    align-items: end;
    transform: translate(-1.75rem);
  }
  .curve-inner {
    background: #F3AC3C;
    height: 4.95rem;
    width: 3.05rem;
    margin: 0.46rem;
    border-radius: 0 0 3rem 3rem;
  }
  .absolute-box {
    position: absolute;
    top: 0;
    height: 5rem;
    width: 5rem;
    background: #F3AC3C;
    transform: translate(5rem, 5.9rem);
  }
</style>
https://rua-iri.com/css_battle/4-9-2024/