CSS Battle #49 – Stay at Home

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

[meg-gutshall]

My first attempt using position: relative; – 600.43 {717}

<div class=r></div><div class=h><div class=w></div><div class=d></div></div>
<style>
  body {
    background: #6592CF;
    margin: 0;
  }
  div { position: relative; }
  .w, .d { background: #EEB850; }
  .r , .h { top: 50; }
  .r {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 100px 100px;
    border-color: #6592CF #6592CF #243D83;
    left: 100;
  }
  .w {
    width: 100px;
    height: 10px;
    border-radius: 10px;
    left: 25;
    top: -5;
  }
  .h {
    background: #243D83;
    width: 150px;
    height: 100px;
    border-radius: 0 0 10px 10px;
    left: 125;
  }
  .d {
    width: 50px;
    height: 50px;
    border-radius: 10px 10px 0 0;
    left: 50;
    top: 40;
  }
</style>

[danieltott]

First pass using triangles and margins – 616.74 {333}(after minification)

<p r>
<dt>
<p w>
<p d>

<style>
  *{
    background:#6592CF;
  }
  [r] {
    margin:-58 92 0;
    border: 25vw solid #0000;
    width:0;
    border-bottom-color:#243D83;
  }
  dt {
    background:#243D83;
    width:150;
    height:105;
    margin:-10 117;
    border-radius: 10px;
    padding:5 0 0
  }
  dt p {
    background:#EEB850;
  }
  [w] {
    margin:0 25;
    height:10;
    border-radius:1in
  }
  [d] {
    height:50;
    margin:45 50;
    border-radius: 10px 10px 0 0;
  }
</style>