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 (4/1/2026)
  • Target (5/1/2026)
  • Target (6/1/2026)
  • Target (7/1/2026)
  • Target (8/1/2026)
  • Target (9/1/2026)
  • Target (11/1/2026)
  • Target (12/1/2026)
  • Target (13/1/2026)
  • Target (14/1/2026)

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>

Target (4/1/2026)

<div><p></p></div>
<style>
  div {
    width: 240px;
    height: 140px;
    margin: auto;
    border: 20px solid #8AB8B6;
    border-width: 30px 20px;
  }
  div::before
  , div::after 
  {
    content: "";
    width: 60px;
    height: 240px;
    display: block;
    background: #F3EAD2;
    position: absolute;
    top: 30px;
    z-index: -1;
  }
  div::after {
    right: 80px
  }
  body {
    background: #4C455B;
    display: flex;
  }
  p {
    background: #8AB8B6;
    width: 100%;
    height: 100%;
    position: relative;
    top: -16px;
    z-index: -2;
  }
</style>

Target (5/1/2026)

<div></div><div></div>
<style>
  div {
    width: 56px;
    height: 170px;
    background: #EFEB99;
    display: inline-block;
  }
  div:nth-child(-n+3) {
    margin-right: 56px;
  }
  div:nth-child(n+5) {
    margin-left: 56px;
    position: relative;
    top: -40px;
  }
  div:nth-child(6) {
    margin-left: 52px;
  }
  body {
    background: #8647E6;
    margin: 0 4px;
  }
</style>

:nth-child() - CSS | MDN

Target (6/1/2026)

<div></div>
<style>
  div {
    width: 60px;
    height: 60px;
    background: #38483C;
    margin: auto;
  }
  div::before, div::after {
    content: "";
    background: #C36768;
    width: 180px;
    height: 40px;
    position: relative;
    display: block;
    top: 10px;
    left: -100px;
    border: solid #38483C;
    border-width: 0 40px;
    z-index: -1;
  }
  div::after {
    top: -30px;
    transform: rotate(90deg);
  }
  body {
    background: #F3EAD2;
    display: flex;
  }
</style>

Target (7/1/2026)

<div></div>
<div></div>
<style>
  div {
    width: 160px;
    height: 70px;
    background: #CF6939;
    margin: 0;
  }
  div:nth-child(2) {
    width: 110px;
  }
  body {
    background: #2F434E;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  div::before, div::after {
    content: "";
    width: 110px;
    height: 70px;
    background: inherit;
    display: block;
    position: relative;
    left: -50px;
    top: -30px;
  }
  div::after {
    left: 50px;
    top: -40px;
  }
</style>

Target (8/1/2026)

<div></div><div></div>
<div></div><div></div>
<style>
  div {
    width: 90px;
    height: 40px;
    background: #EE7667;
    margin: 32px 27px
  }
  div::after {
    content: "";
    position: relative;
    background: inherit;
    display: block;
    width: 90px;
    height: 40px;
    rotate: 90deg;
    top: 25px;
  }
  div:nth-child(n + 3) {
    background: #84BE8D;
    rotate: 180deg;
  }
  body {
    background: #F2EAA8;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 76px;
  }
</style>

Target (9/1/2026)

<div></div>
<div></div>
<style>
  div {
    width: 100%;
    height: 125px;
    background: #2B2A4A;
    margin: 0 70px
  }
  div::after {
    content: "";
    display: block;
    position: relative;
    right: 0;
    background: #ECE3DF;
    width: 70px;
    height: calc(100% - 25px);
    margin-left: calc(100% - 140px);
  }
  div + div {
    margin: 50px 20px -70px 0;
    width: calc(100% - 70px);
  }
  div + div::after {
    margin-left: 0;
    top: 25px;
  }
  body {
    margin: 0;
    background: #ECE3DF
  }
</style>

Target (11/1/2026)

<div><span></span><span></span></div>
<style>
  span {
    display: inline-block;
    height: 10px;
    background: #F9EAF1;
    width: 100%;
    position: relative;
    top: -120px
  }
  span + span {
    background: #4C455B;
    margin-top: 10px;
  }
  div {
    margin: auto;
    width: 40px;
    height: 50px;
    background: #5AA4B7;
  }
  div::before, div::after {
    content: "";
    background: #F9EAF1;    
    position: relative;
    display: block;
    width: 120px;
    height: 130px;
    top: -80px;
    z-index: -1;
  }
  div::after {
    background: #4C455B;
    left: -80px;
    top: -160px;    
  }
  body {
    background: #5AA4B7;
    display: flex;
  }
</style>

Target (12/1/2026)

<div></div>
<style>
  div {
    width: calc(100%-60px);
    height: 100%;
    background: inherit;
    margin-top: 60px;
    border: 60px solid #222222;
    border-radius: 120px;
  }
  div::after, div::before {
    content: "";
    width: 40px;
    height: 120px;
    display: block;
    border: inherit;
    border-top: 0;
    background: inherit;
    position: relative;
    top: -420px;
    left: 60px;
  }
  div::before {
    width: 150%;
    height: 100%;
    top: 60px;
    left: -130px;
  }
  body {
    background: #FADE8B;
    margin: 0;
  }
</style>

Target (13/1/2026)

<div></div>
<p></p>
<div></div>
<style>
  div, p {
    width: 50px;
    height: 50px;
    background: #194247;
    margin: 0 auto;
    position: relative;
  }

  p { border-radius: 100% }

  div::before, div::after {
    content: "";
    width: 100%;
    height: 120px;
    display: block;
    position: inherit;
    top: 50px;
    background: inherit;
    margin-top: 10px;
  }
  
  div::after { height: inherit }

  body {
    background: #45B45B;
    margin: 30px -33px;
    display: flex;
  }
</style>

Target (14/1/2026)

<div></div>
<div></div>
<div></div>
<div></div>
<style>
  div {
    width: 50px;
    height: 50px;
    background: #FFD0FA;
    border-radius: 70%;
    margin: 0 auto
  }
  div::after {
    content:"";
    display: block;
    width: inherit;
    height: 120px;
    background: inherit;
    position: relative;
    top: 60px;
    left: -30px;
  }
  div:nth-of-type(n+3) {
    rotate: 180deg;
    transform: translateY(-15px);
  }
  body {
    background: #A82973;
    margin: 30px 25px;
    display: flex;
    flex-wrap: wrap;
    gap: 110px;
  }
</style>