CSS Battle #82 – Diamond Cut

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

[Narigo]

Code Source – 601.68 {574}

<z><r></r><x></x></z>
<style>
  body {
    display: grid;
    place-items: center;
    background: #F3AC3C;
  }
  z {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    background: #F3AC3C;
    outline: 30px #998235 solid;
    rotate: 45deg;
    translate: -2px;
  }
  r {
    position: absolute;
    background: transparent;
    border: 30px #F3AC3C solid;
    width: 100px;
    height: 100px;
    translate: -95px -95px;
  }
  x {
    position: absolute;
    height: 30px;
    width: 30px;
    translate: 35px 35px;
    background: #1A4341;
  }
</style>

[meg-gutshall]

First Attempt – 606.33 {435}

<x bg></x>
<x by></x>
<x dot></x>
<style>
  body {
    display: grid;
    place-items: center;
    background: #F3AC3C;
  }
  x {
    position: relative;
    width: 100;
    height: 100;
    rotate: 45deg;
    left: -2;
  }
  [bg] {
    border: 30px solid #998235;
    top: 62;
  }
  [by] {
    border: 30px solid #F3AC3C;
    top: -190;
  }
  [dot] {
    width: 30;
    height: 30;
    background: #1A4341;
    top: -193;
  }
</style>

A different method – 606.33 {435}

Shout out to @Narigo for the hint with box-sizing!

<x bg></x>
<x by></x>
<x dot></x>
<style>
  body {
    display: grid;
    place-items: center;
    background: #F3AC3C;
  }
  x {
    box-sizing: border-box;
    position: relative;
    width: 160;
    height: 160;
    rotate: 45deg;
    left: -2;
  }
  [bg] {
    border: 30px solid #998235;
    top: 63;
  }
  [by] {
    border: 30px solid #F3AC3C;
    top: -190;
  }
  [dot] {
    width: 30;
    height: 30;
    background: #1A4341;
    top: -193;
  }
</style>