CSS Battle #120 – Tank

[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 – 600.12 {848}

<div id='t1'></div>
<div id='t2'></div>
<div id='r'></div>
<div id='m'></div>
<div id='ta'>
  <div></div>
  <div id='g'></div>
</div>
<style>
body {
  background: #000;
  border: 20px solid #54C144;
  margin: 0;
  display: grid;
  grid-template: 40px 20px / 80px 80px 40px;
  padding: 40px;
  gap: 40px;
}
div {
  width: 80px;
  height: 40px;
  background: #C74E4E;
}
  #r {
    width: 40px;
    height: 180px;
  }
  #m {
    width: 200px;
    grid-column: span 3;
  }

  #ta {
    width: 40px;
    height: 40px;
    background: linear-gradient(#54C144 10px, #000 10px 30px, #54C144 10px);
    box-shadow: 45px 0 0 -15px #FFF, 65px 0 0 -15px #FFF;
  }
  #ta > div {
    width: 20px;
    height: 20px;
    background: #54C144;
    margin: 10px;
  }
  #g {
    position: absolute;
    translate: 20px -35px;
    height: 10px !important;
  }
</style>

[Narigo]

Code Source – 600.03 {991}

<div></div>
<style>
  body {
    border: 20px solid #54C144;
    background:conic-gradient(at 145px 180px, #C74E4E .4turn,#FFFFFF 0 .6turn,#54C144 0 .75turn,#C74E4E 0);
    margin:0;
  }
  div {
    background: #000;
    height:100%;
    clip-path: shape(
      evenodd
      from 0 0, hline by 100%, vline by 100%, hline to 0, move to 40px 40px, hline by 80px, vline by 40px, hline by -80px, move to 160px 40px, hline by 80px, vline by 40px, hline by -80px, move to 40px 120px, hline by 200px, vline by 40px, hline by -200px, move to 280px 40px, hline by 40px, vline by 180px, hline by -40px, move to 40px 180px, hline by 40px, vline by 10px, hline by -10px, vline by 5px, hline by 20px, vline by 10px, hline by -20px, vline by 5px, hline by 10px, vline by 10px, hline by -40px, vline by -10px, hline by 10px, vline by -20px, hline by -10px, move to 100px 195px, hline by 10px, vline by 10px, hline by -10px, move to 120px 195px, hline by 10px, vline by 10px, hline by -10px);
  }
</style>