CodePen Embed - Single div challenge

<main>

  <div n1></div>
  <div n2></div>
  <div n3></div>
  <div n4></div>
  <div n5></div>
  <div n6></div>
  <div n7></div>
  <div n8></div>
  <div n9></div>
  <div n10></div>
  <div n11></div>
  <div n12></div>
  <div n13></div>
  <div n14></div>
  <div n15></div>
  <div n16></div>
  <div n17></div>
  <div n18></div>
  <div n19></div>
  <div n20></div>
  <div n21></div>
  <div n22></div>
  <div n23></div>
  <div n24></div>
  <div n25></div>
  <div n26></div>
  <div n27></div>
  <div n28></div>
  <div n29></div>
  <div n30></div>
  <div n31></div>
  <div n32></div>
  <div n33></div>
  <div n34></div>
  <div n35></div>
  <div n36></div>
  <div n37></div>
  <div n38></div>
  <div n39></div>
  <div n40></div>
  <div n41></div>
  <div n42></div>
  <div n43></div>
  <div n44></div>
  <div n45></div>
  <div n46></div>
  <div n47></div>
  <div n48></div>

</main>

html, body { 
  width: 100%; 
  background: #f0f0f0;
  margin: 0;
}
main {
  font-size: 15vmin;
  display: grid;
  grid-template-columns: repeat(6, 1em);
  grid-template-rows: repeat(8, 1em);
  grid-gap: 1em;
  padding: 1em 0;
  width: calc(6em * 2 - 1em);
  margin: 0 auto;

  --r: #dc4c4e;
  --b: #134ea4;
  --g: #1a9765;
  --y: #e6bc24;
}
main div {
  width: 1em; height: 1em;
}


[n1] {
  background-image: repeating-linear-gradient(
    45deg, #fff, #fff .08em, var(--r) .08em, var(--r) .16em
  );
  outline: .16em solid var(--b);
  outline-offset: -.16em;
  position: relative;
}
  [n1]:after {
    content: '';
    width: 100%; height: 100%;
    position: absolute;
    top: 0; left: 0;
    box-sizing: border-box;
    border: .16em solid;
    border-image: linear-gradient(var(--g), var(--g));
  }


[n2] {
  background: var(--y) conic-gradient(
    from -90deg at 50% 100%,
    var(--b) 16.66%, #0000 16.66%, #0000 33.32%, var(--b) 33.32%
  ) 50% 0 / 50% 43% no-repeat;
  clip-path: polygon(0 0, 100% 0, 50% 86.6%);
}


[n3] {
  border-radius: 50%;
  background:
    conic-gradient(var(--g) 25%, #0000 25%, #0000 75%, var(--b) 75%),
    radial-gradient(var(--r) 37% , var(--y) 0);
}


[n4] {
  background:
    linear-gradient(
      90deg, var(--y) calc(100% / 3),
      #0000 calc(100% / 3),
      #0000 calc(200% / 3),
      var(--b) calc(200% / 3)),
    linear-gradient(-45deg, var(--y) 50%, var(--b) 0);
  transform: rotate(-45deg);
}


[n5] {
  background:
    conic-gradient(from 90deg, var(--b) 50%, var(--g) 0) 10% 0 / 50% 50% repeat-y,
    conic-gradient(from 90deg, var(--g) 50%, var(--b) 0) 100% 0 / 50% 50% repeat-y;
  clip-path: polygon(13.4% 50%, 100% 0, 100% 100%);
}


[n6] {
  background:
    linear-gradient(135deg, var(--r) 50%, var(--y) 50%) 0 100% / 50% 50% no-repeat,
    linear-gradient(var(--b), var(--b)) 0 100% / 75% 75% no-repeat;
  background-color: var(--y);
}


[n7] {
  background:
    conic-gradient( from -30deg, var(--y) calc(100% / 6), #0000 calc(100% / 6) ) 50% 40% / 65% 65%,  
    linear-gradient(var(--b), var(--b)) 0 .15em;
  background-color: var(--y);
  background-repeat: no-repeat;
  clip-path: polygon(0 0, 100% 0, 50% 86.6%);
}


[n8] {
  border-radius: 50%;
  background: linear-gradient(45deg, var(--r) 50%, var(--y) 0);
  box-shadow: inset 0 0 0 .2em var(--b);
}


[n9] {
  background:
    var(--g)
    conic-gradient(
      var(--y) 25%,
      var(--b) 25%, var(--b) 50%,
      var(--y) 50%, var(--y) 75%,
      var(--b) 75%
    ) 
    50% / calc(100% / 3) 100% 
    no-repeat
}


[n10] {
  border-radius: 50%;
  background:
    linear-gradient(45deg, var(--r) 56%, #0000 0) calc(50% - .079em) / .17em 100% no-repeat,
    linear-gradient(45deg, #0000 42%, var(--r) 0) calc(50% + .079em) / .17em 100% no-repeat,
    linear-gradient(90deg, var(--y) 50%, var(--b) 0);
}


[n11] {
  background:
    conic-gradient(#0000 37.5%, var(--g) 37.5%, var(--g) 62.5%, var(--y) 62.5%, var(--y) 87.5%, #0000 0),
    radial-gradient(var(--b) 20%, #fff 20%, #fff 40%, var(--b) 40%);
  background-color: var(--b));
}


[n12] {
  background: var(--b)
    linear-gradient(var(--y), var(--y)) 73% 0 / 35% 100% no-repeat;
  clip-path: polygon(13.4% 50%, 100% 0, 100% 100%);
}


[n13] {
  border-radius: 50%;
  background:
    radial-gradient(var(--g) 18%, #0000 0),
    conic-gradient(from 90deg, var(--y) 25%, #0000 25%),
    radial-gradient(#fff 30%, #0000 0);
  background-color: var(--b);
}


[n14] {
  background:
    var(--y)
    linear-gradient(var(--g) 50%, var(--b) 0)
    0 50% / 100% calc(100% / 3) no-repeat;
  clip-path: polygon(0 0, 86.6% 50%, 0 100%);
}


[n15] {
  background: var(--r) radial-gradient(circle at 100% 0, var(--b) 70.5%, #0000 0)
}


[n16] {
  border-radius: 50%;
  background:
    linear-gradient(var(--g), var(--g)) 21% -15% / 30% 86% no-repeat,
    linear-gradient(var(--g), var(--g)) 144% 76% / 90% 30% no-repeat;
  background-color: var(--r);
  transform: rotate(-45deg);
}


[n17] {
  background: linear-gradient(-45deg, var(--g) 50%, var(--y) 0) 50% / 62% 62% no-repeat;
  background-color: var(--b);
}


[n18] {
  background:
    radial-gradient(var(--b) 40%, #0000 0) 50% / 50% 50% no-repeat,
    radial-gradient(var(--y) 70%, #0000 0) 50% / 60% 60% no-repeat;
  background-color: var(--b);
  border-radius: 50%;
  box-sizing: border-box;
  border: .05em solid var(--g);
}


[n19] {
  display: flex;
  background: var(--b);
}
  [n19]:before,
  [n19]:after {
    content: '';
    width: 50%; height: 100%;
    background: radial-gradient(circle at 139.5% 25%, var(--b) 50%, var(--y) 0);
    background-size: 200% 200%;
  }
  [n19]:after {
    transform: rotateY(180deg);
  }


[n20] {
  border-radius: 50%;
  background: radial-gradient(
    var(--y) 12.5%,
    var(--b) 12.5%, var(--b) 30%,
    var(--y) 30%, var(--y) 50%,
    var(--b) 50%, var(--b) 0
  );
}


[n21] {
  background: var(--b);
  clip-path: polygon(0 0, 86.6% 50%, 0 100%);
}
  [n21]:after {
    content: '';
    display: block;
    width: 50%; height: 50%;
    background: var(--r);
    clip-path: polygon(13.4% 50%, 100% 0, 100% 100%);
    transform: translate(-12%, 50%);
  }


[n22] {
  transform: rotate(45deg);
  background:
    radial-gradient(circle at 0 0, var(--r) 15%, #0000 0),
    radial-gradient(circle at 100% 0, var(--r) 15%, #0000 0),
    radial-gradient(circle at 0 100%, var(--r) 15%, #0000 0),
    radial-gradient(circle at 100% 100%, var(--r) 15%, #0000 0);
  background-color: var(--y);
  background-repeat: no-repeat;
}


[n23] {
  background: var(--y);
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}
  [n23]:after, [n23]:before {
    content: '';
    position: absolute;
    border-radius: 50%;
    width: 150%;
    height: 200%;
  }
  [n23]:before {
    right: 50%;
    background: var(--b);
  }
  [n23]:after {
    left: 50%;
    background: var(--g);
  }


[n24] {
  width: 0; height: 0;
  border: .5em solid;
  border-color: var(--b) var(--r) var(--y) var(--g);
}


[n25] {
  clip-path: polygon(0 0, 86.6% 50%, 0 100%);
  background:
    linear-gradient(var(--b), var(--b)) 0 52% / 22% 16%,
    linear-gradient(var(--y), var(--y)) -44% 51% / 60% 51%;
  background-color: var(--b);
  background-repeat: no-repeat;
}


[n26] {
  border-radius: 50%;
  border: 1px solid var(--b);
  background: 
    var(--g)
    radial-gradient(var(--b) 50%, #0000 0) 50% 0 / 50% 50% repeat-y;
}


[n27] {
  background-color: var(--y);
}
  [n27]:after {
    content: '';
    display: block;
    width: 100%; height: 100%;
    background: var(--r) linear-gradient(var(--y), var(--y)) 50% / 35% 35% no-repeat;
    clip-path: polygon(
      0 0, 15% 0, 15% 15%, 85% 15%, 85% 0, 100% 0,
      100% 15%, 85% 15%, 85% 85%, 100% 85%, 100% 100%,
      85% 100%, 85% 85%, 15% 85%, 15% 100%, 0 100%,
      0 85%, 15% 85%, 15% 15%, 0 15%
    );
  }


[n28] {
  background: radial-gradient(#fff 25%, var(--y) 0);
  border: .06em solid;
  border-color: var(--g) #0000 var(--b);
  border-radius: 50%;
  transform: rotate(-45deg);
}


[n29] {
  background: var(--y);
  position: relative;
}
  [n29], [n29]:after, [n29]:before {
    clip-path: polygon(13.4% 50%, 100% 0, 100% 100%);
  }

  [n29]:before, [n29]:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
  }
  [n29]:after {
    background: #fff;
    transform: translateX(30%);
  }
  [n29]:before {
    background: var(--y);
    z-index: 1;
    transform: translateX(55%);
  }


[n30] {
  border: .1em solid var(--g);
  border-radius: 50%;
  background: var(--y) radial-gradient(
    circle at 114% 50%, var(--b) 50%, #0000 0
  ) 100% 50% / 100% 100% no-repeat
}


[n31] {
  background: linear-gradient(var(--y) 50%, var(--g) 0);
  border-radius: 50%;
}
  [n31]:after {
    content: '';
    display: block;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, var(--r) 50%, #fff 0);
    border-radius: 50%;
    transform: scale(.42);
  }


[n32] {
  background: var(--y);
  border: .05em solid var(--b);
  position: relative;
  transform: rotate(45deg);
}
  [n32]:after, [n32]:before {
    content: '';
    position: absolute;
    width: 70%; height: 70%;
    top: 50%; left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(45deg, #fff 50%, var(--b) 0);
  }
  [n32]:before {
    width: 40%; height: 40%;
    z-index: 1;
    background: linear-gradient(45deg, var(--b) 50%, #fff 0);
  }


[n33] {
  background: var(--b);
  position: relative;
}
  [n33], [n33]:after, [n33]:before {
    clip-path: polygon(50% 13.4%, 100% 100%, 0 100%);
  }
  
  [n33]:before, [n33]:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
  }
  [n33]:after {
    background: var(--y);
    transform: translateY(15%);
  }
  [n33]:before {
    background: var(--g);
    z-index: 1;
    transform: translateY(50%);
  }


[n34] {
  background:
    radial-gradient(circle at 0 50%, var(--b) 18%, #0000 0),
    linear-gradient(45deg, var(--y) 50%, #0000 0),
    linear-gradient(135deg, var(--y) 50%, var(--r) 0)
}


[n35] {
  border-radius: 50%;
  background: radial-gradient(
    var(--b) 20%,
    var(--y) 20%, var(--y) 38%,
    var(--g) 38%, var(--g) 0
  );
}


[n36] {
  clip-path: polygon(50% 13.4%, 100% 100%, 0 100%);
  background:
    radial-gradient(circle at 50% 100%, var(--b) 50%, #0000 0) 50% 188% / 100% 80% no-repeat,
    radial-gradient(var(--r) 10%, #0000 0);
  background-color: var(--y);
}


[n37] {
  background: radial-gradient(circle at 100% 0, var(--y) 70.5%, var(--b) 0) 0 0 / 50% 50%;
}



[n38] {
  background: linear-gradient(90deg, var(--g) 60%, var(--b) 0);
  clip-path: polygon(13.4% 50%, 100% 0, 100% 100%);
}
  [n38]:after {
    content: '';
    display: block;
    width: .1em; height: 100%;
    background: var(--r);
    margin-left: .55em;
    border: .03em solid #fff;
  }


[n39] {
  border-radius: 50%;
  background:
    conic-gradient(from -90deg at 60% 60%, var(--b) 12.5%, #0000 0),
    linear-gradient(var(--b) 40%, var(--g) 0);
}


[n40] {
  background: linear-gradient(
    var(--r) 45%,
    var(--y) 45%, var(--y) 70%,
    var(--g) 70%, var(--g) 92%,
    var(--b) 92%
  );
  clip-path: polygon(50% 13.4%, 100% 100%, 0 100%);
}


[n41] {
  border-radius: 50%;
  border: .1em solid var(--b);
  background: var(--y) radial-gradient(var(--b) 25%, #0000 0);
}


[n42] {
  clip-path: polygon(50% 13.4%, 100% 100%, 0 100%);
  --shape: linear-gradient(-120deg, #0000 30%, var(--g) 30%, var(--g) 70%, #0000 0);
  background:
    var(--shape) 45% 101% / 50% 38%,
    var(--shape) 30% 41.5% / 50% 38%;
  background-color: var(--y);
  background-repeat: no-repeat;
}


[n43] {
  border-radius: 50%;
  background: linear-gradient(-45deg, var(--g) 50%, var(--b) 0);
}
[n43]:after {
  content: '';
  display: block;
  width: 100%; height: 100%;
  background-image: repeating-linear-gradient(
    -45deg, #fff, #fff .065em, var(--r) .065em, var(--r) .17em
  );
  clip-path: circle(30%);
}


[n44] {
  background:
    radial-gradient(var(--b) 50%, #0000 0) 49% 23.5% / 22.22% 20.22%,
    radial-gradient(var(--y) 50%, #0000 0) 52% 5.5% / 22.22% 20.22%,
    radial-gradient(var(--b) 50%, #0000 0) 50% -16% / 22.22% 22.22%,
    radial-gradient(var(--b) 50%, #0000 0) 50% 77.5% / 22.22% 20.22%,
    radial-gradient(var(--y) 50%, #0000 0) 52% 96% / 22.22% 20.22%,
    radial-gradient(var(--b) 50%, #0000 0) 50% 116% / 22.22% 22.22%,
    linear-gradient(90deg, var(--b) 50%, var(--y) 0);
  background-repeat: no-repeat;
}
  [n44]:after {
    content: '';
    display: block;
    width: 100%; height: 100%;
    clip-path: polygon(0 0 , 100% 50%, 0 100%);
    background:
      radial-gradient(var(--b) 50%, #0000 0) 56% 69% / 26.22% 20%,
      radial-gradient(var(--b) 50%, #0000 0) 61% 33.5% / 35.22% 23.5%,
      radial-gradient(var(--y) 50%, #0000 0) 56% 53% / 22.22% 19.5%,
      linear-gradient(90deg, var(--y) 56%, var(--b) 0);
    background-repeat: no-repeat;
  }


[n45] {
  border-radius: 50%;
  background:
    radial-gradient(var(--y) 18%, #0000 0),
    linear-gradient(90deg, var(--y) 50%, var(--b) 0);
}


[n46] {
  background:
    linear-gradient(var(--r), var(--r)) 0 50% / 50% 30% no-repeat,
    linear-gradient(90deg, var(--g) 50%, var(--b) 0);
}


[n47] {
  background:
    linear-gradient(var(--r), var(--r)) 0 0 / 34% 100% no-repeat,
    linear-gradient(148deg, #0000 50%, var(--r) 0) 150% 106% / 50% 50% no-repeat,
    linear-gradient(32deg, #0000 50%, var(--r) 0) 160% 0% / 50% 50% no-repeat;
  background-color: var(--y);
  clip-path: polygon(13.4% 50%, 100% 0, 100% 100%);
}


[n48], [n48]:after {
  background:
    linear-gradient(90deg, var(--b) 50%, var(--y) 0) 50% / 45% 100% no-repeat,
    linear-gradient(90deg, var(--y) 50%, var(--b) 0);
}
  [n48]:after {
    content: '';
    display: block;
    width: 100%; height: 100%;
    transform: rotateY(180deg);
    clip-path: circle(35%);
  }

This Pen is owned by kachibito on CodePen. It is a fork of this Pen.

See more by @kachibito on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.