CSS Battle #118 – Donkey Kong

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

[meg-gutshall]

This one was tricky!! – 601.21 {609}

<div>
  <div></div>
  <div t></div>
  <div></div>
</div>
<style>
  body {
    display: grid;
    place-content: center;
    background: #000;
  }
  div {
    display: grid;
    align-content: space-between;
    width: 300px;
    height: 120px;
    background: linear-gradient(#FFF 60px, #000 0) 30px 0/20px 60px no-repeat,
    linear-gradient(#FFF 60px, #000 0) 140px 60px/20px 60px no-repeat,
    linear-gradient(#FFF 120px, #000 0) 250px 0/20px 120px no-repeat;
  }
  div > div {
    width: 100%;
    height: 20px;
    background: #AF067C;
    border-radius: 10px
  }
  [t] {
    rotate: -4deg
  }
</style>

[Narigo]

Code Source – 604.41 {473}

<div l>
  <div></div>
</div>
<style>
  body{
  --s:20px 50px no-repeat;
  --g:conic-gradient(#fff,#fff);
    background:
    var(--g) 79%/20px 90px no-repeat,
    var(--g) 50% 60%/var(--s),
    var(--g) 21% 40%/var(--s),
    #000}
[l]{
  margin:75 auto;display:grid;place-items:center;width:280;height:150;
  div{rotate:-4deg}
  &:after,&:before,div{
    display:block;
    width:100%;
    content:'';
    border: 10px solid #AF067C;
    border-radius: 10px;
  }
}
</style>

[Arvind644]

Code Source – 602.9 {517}

<a></a>
<a m></a>
<a></a>
<p></p>
<p mi></p>
<p l></p>
<style>
  body {
    display: grid;
    background: #000;
    place-content: center;
    gap: 30px;
  }
  a {
    width: 300;
    height: 20;
    background: #AF067C;
    border-radius: 10px;
  }
  [m] {
    rotate: -4deg;
  }
  p {
    background: #FFF;
    width: 20;
    height: 40;
    position: absolute;
    translate: 72px 85px;
    z-index: -1;
  }
  [mi] {
    translate: 182px 130px;
  }
  [l] {
    translate: 292px 85px;
    height: 85;
  }
</style>