CSS Battle #92 – Squeeze

[meg-gutshall]

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 {characters}</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 {characters}

your cssbattles code here!

[michaella23]

Micha's solution– 99.9% {596.45}

<div o></div>
<div t></div>
<div h></div>
<div m>
<style>
  body {
    display: flex;
    margin: 50px -125px;
    background: #6592CF;
  }
  div {
    width: 200px;
    height: 200px;
    background: #243D83;
    border-radius: 100%;
    position: relative;
  }

  [o] {
    margin-right: 28px;
  }

  [h] {
    margin-left: 28px;
  }
  [t]:before,
  [t]:after,
  [h]:before,
  [h]:after{
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    background:#6592CF;
    left: -30.25px;
    z-index: 10;
  }
  div:before {
    top: 58px;
    border-radius: 0 0 50% 50%;
    border-bottom: 2px solid #243D83;
  }
  div:after {
    top: 108px;
    border-radius: 50% 50% 0 0;
    border-top: 2px solid #243D83;
  }

  [m] {
    position: absolute;
    width: 100vw;
    margin: 0 125px;
    height: 40px;
    border-radius: 0;
    top: 45%;
  }
</style>

[michaella23]

Minified– 100% {597.02 }

<div o></div><div t></div><div h></div><div m><style>body{display:flex;margin:50px -125;background:#6592CF}div{width:200;height:200;background:#243D83;border-radius:100%;position:relative}[o]{margin-right:28}[h]{margin-left:28}[t]:before,[t]:after,[h]:before,[h]:after{content:'';position:absolute;width:32;height:32;background:#6592CF;left:-30.25;z-index:10}div:before{top:58;border-radius:0 0 50% 50%;border-bottom:2px solid #243D83}div:after{top:108;border-radius:50% 50% 0 0;border-top:2px solid #243D83}[m]{position:absolute;width:100vw;margin:0 125;height:40;border-radius:0;top:45%