CSSBattle

I started to play CSSBattle

Table of contents

• CSSBattle
  • Target (24/12/2025)
  • Target (23/12/2025)
  • Target (25/12/2025)
  • Target (26/12/2025)

Target (24/12/2025)

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<style>
  div {
    width: 170px;
    height: 40px;
    background: #0098D1;
  }
  div:nth-of-type(3n +1) {margin-bottom: 10px}
  div:nth-of-type(even) {width: 80px;height: 25px;}
  div:nth-of-type(3) {width: 220px;height: 150px;
  }
  body {
    background: #302562; 
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center
  }
</style>

Target (23/12/2025)

<div></div>
  <div><div></div><div></div><div></div></div>
<div></div>
<style>
  div {
    width: 80px;
    height: 80px;
    background: #D95362;
  }
  body > div {border-radius: 100%}

  body, div:has(div)  {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 0;
    background: #DACFA3;
  }

  div:has(div) {
    flex-direction: column;
    height: calc(100% + 30px);
    background: transparent;
    gap: 10px;
  }

  div > div {
    background: #2D3464;
    height: 100px
  } 
</style>

Target (25/12/2025)

<div></div><div></div><div></div><div></div><div></div>
<style>
  div {
    width: 20px;
    height: 20px;
    background: #0F6B38;
  }
  
  div + div {
    width: 50px
  }
  div + div + div {
    width: 80px
  }
  div + div + div + div {
    width: 110px
  }
  div + div + div + div + div {
    width: 140px
  }

  div:first-child {
    background: #FFCA00
  }
  div:nth-child(2n) {
    background: #1BBC63
  }

  body {
    background: #11092D;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: calc(100% - 15px);
    justify-content: center;
    gap: 20px;
  }
</style>

Target (26/12/2025)

<article>
  <section>
    <div></div>
    <div></div>
  </section>
  <section>
    <div></div>
    <div></div>
  </section>
</article>

<style>
 div {
    width: 60px;
    height: 60px;
    background: #EEC8EA;
    display: inline-block;
    margin: 8px;
    transform: rotate(-10deg);
  }
  section:first-child > div:last-child,
  section:last-child > div:first-child
  {
    transform: rotate(10deg)
  }
  
  body {
    background: #A82973;
    align-items: center;
    display: flex;
  }
  article {
    margin: auto;
    transform:translate(-.1px, 1.95px)
  }
</style>