CSS Battle #116 – Headphones

[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!

[Arvind644]

Code Source – 601.82 {566}

<div id='top'></div>
<div id='left'></div>
<div id='right'></div>
<style>
body {
  background: #293D7E;
  display: grid;
  place-content: center;
}
  #top {
    width: 130px;
    height: 100px;
    background: #293D7E;
    border: 20px solid #6E91CA;
    border-bottom: none;
    border-radius: 85px 85px 0 0;
    grid-column: span 2;
  }
  #left,#right {
    width: 60px;
    height: 80px;
    background: #6E91CA;
    border-radius: 0 20px 30px 30px;
    margin-bottom: 10px;
  }
  #right {
    border-radius: 20px 0 30px 30px;
    justify-self: end;
  }
</style>

[meg-gutshall]

Great job, Arvind! 🎉 🌮

[meg-gutshall]

First attempt – 601.39 {594}

<div t></div>
<div r></div>
<div l></div>
<style>
  body {
    background: #293D7E;
    display: grid;
    place-items: center;
    margin: 0;
  }
  div {
    position: relative;
    width: 60px;
    height: 80px;
    background: #6E91CA;
  }
  [t] {
    width: 130px;
    height: 100px;
    background: #293D7E;
    border: 20px solid #6E91CA;
    border-radius: 85px 85px 0 0;
    border-bottom: none;
    top: 42px;
  }
  [r] {
    left: -55px;
    top: 35px;
    border-radius: 0 20px 30px 30px;
  }
  [l] {
    left: 55px;
    top: -52px;
    border-radius: 20px 0 30px 30px;
  }
</style>

[Narigo]

Code Source – 613.44 {356}

<p l>
<p r>
<div>
<style>
  &{background:#293D7E}
  p {
    position:fixed;
    background:#6E91CA;
    top:149;
    left: 115;
    width: 60;
    height: 80;
    border-radius: 60px 60px 80px 80px;
  }
  [r]{left:225}
  div{border:20px solid #6E91CA;border-bottom:0;border-radius:85px 85px 0 0;height:130;width:130;position:fixed;left:115;top:45}
</style>