CSS Battle #43 – Wrench

[jmslynn]

Link to battle:

Let's battle! ⚔️

Copy the code block below to format your comment on the discussion thread:

<details>
<summary>Code Source  – <strong>score {character count}</strong></summary>
<!-- have to be followed by an empty line! -->

```html
your cssbattles code here!
```

</details>

What others will see:

This will result in a nice hidden bit like so:

Code Source – score {character count}

your cssbattles code here!

---

Here's the solution we worked on during the meeting:

Code Source

<div class="c">
  <div class="l"></div>
<div class="r"></div>
</div>
<style>
  * {
    margin: 0;
    background: #6592CF;
  }
  .l, .r {
    position: absolute;
    width: 200px;
      height: 242px;
        border: 30px solid #243D83;
    border-radius:70px;
      box-sizing: border-box;
  }
  .l {
    right: 40px;
  }
  .r {
        left: 40px;
  }
    .c {
    position: absolute;
    width: 110px;
    height: 242px;
overflow: hidden;
    top: 30px;
    left: 145px;
  }
</style>

[danieltott]

Nice! Sorry I missed it again - been sick the last couple days 🤒

Here's a quick one I whipped up:

Code Source

<div></div>
<style>
  html{
    background:#6592CF;
    color:#243D83;
    clip-path:inset(0 145px)
  }
  div {
    margin:30 177 0 57;
    height: 182;
    border-radius:70px;
    border:30px solid;
    -webkit-box-reflect:right -30px;
  }
</style>