<main id="content">
	<ul style="--d:91deg;"><li style="--bg:#ff69b4"></li><li style="--bg:#262626"></li><li style="--bg:#faebd7"></li><li style="--bg:#262626"></li><li style="--bg:#ff69b4"></li></ul>
	<ul style="--d:243deg;"><li style="--bg:#faebd7"></li><li style="--bg:#262626"></li><li style="--bg:#ffff00"></li></ul>
	<ul style="--d:184deg;"><li style="--bg:#faebd7"></li><li style="--bg:#262626"></li><li style="--bg:#faebd7"></li><li style="--bg:#262626"></li><li style="--bg:#faebd7"></li></ul>
	<ul style="--d:71deg;"><li style="--bg:#ffa500"></li><li style="--bg:#262626"></li><li style="--bg:#faebd7"></li></ul>
	<ul style="--d:210deg;"><li style="--bg:#faebd7"></li><li style="--bg:#262626"></li><li style="--bg:#ff69b4"></li></ul>
	<ul style="--d:13deg;"><li style="--bg:#ffff00"></li><li style="--bg:#262626"></li><li style="--bg:#faebd7"></li><li style="--bg:#262626"></li><li style="--bg:#ffff00"></li></ul>
	<ul style="--d:24deg;"><li style="--bg:#faebd7"></li><li style="--bg:#262626"></li><li style="--bg:#faebd7"></li><li style="--bg:#262626"></li><li style="--bg:#faebd7"></li></ul>
	<ul style="--d:192deg;"><li style="--bg:#61442c"></li><li style="--bg:#262626"></li><li style="--bg:#61442c"></li><li style="--bg:#262626"></li><li style="--bg:#61442c"></li></ul>
	<ul style="--d:291deg;"><li style="--bg:#faebd7"></li><li style="--bg:#262626"></li><li style="--bg:#faebd7"></li><li style="--bg:#262626"></li><li style="--bg:#faebd7"></li></ul>
	<ul style="--d:85deg;"><li style="--bg:#faebd7"></li><li style="--bg:#262626"></li><li style="--bg:#ffff00"></li></ul>
	<ul style="--d:202deg;"><li style="--bg:#faebd7"></li><li style="--bg:#262626"></li><li style="--bg:#faebd7"></li></ul>
	<ul style="--d:284deg;"><li style="--bg:#ff69b4"></li><li style="--bg:#262626"></li><li style="--bg:#faebd7"></li><li style="--bg:#262626"></li><li style="--bg:#ff69b4"></li></ul>
	<ul style="--d:97deg;"><li style="--bg:#ff69b4"></li><li style="--bg:#262626"></li><li style="--bg:#faebd7"></li></ul>
	<ul style="--d:356deg;"><li style="--bg:#faebd7"></li><li style="--bg:#262626"></li><li style="--bg:#ffff00"></li></ul>
	<ul style="--d:90deg;"><li style="--bg:#faebd7"></li><li style="--bg:#262626"></li><li style="--bg:#ffff00"></li></ul>
	<ul style="--d:214deg;"><li style="--bg:#ffa500"></li><li style="--bg:#262626"></li><li style="--bg:#faebd7"></li></ul>
	<ul style="--d:247deg;"><li style="--bg:#ffff00"></li><li style="--bg:#262626"></li><li style="--bg:#faebd7"></li><li style="--bg:#262626"></li><li style="--bg:#ffff00"></li></ul>
	<ul style="--d:359deg;"><li style="--bg:#61442c"></li><li style="--bg:#262626"></li><li style="--bg:#61442c"></li><li style="--bg:#262626"></li><li style="--bg:#61442c"></li></ul>
	<ul style="--d:338deg;"><li style="--bg:#61442c"></li><li style="--bg:#262626"></li><li style="--bg:#61442c"></li></ul>
	<ul style="--d:56deg;"><li style="--bg:#faebd7"></li><li style="--bg:#262626"></li><li style="--bg:#faebd7"></li><li style="--bg:#262626"></li><li style="--bg:#faebd7"></li></ul>
	<ul style="--d:106deg;"><li style="--bg:#faebd7"></li><li style="--bg:#262626"></li><li style="--bg:#faebd7"></li></ul>
	<ul style="--d:71deg;"><li style="--bg:#faebd7"></li><li style="--bg:#262626"></li><li style="--bg:#ff69b4"></li><li style="--bg:#262626"></li><li style="--bg:#ff69b4"></li></ul>
	<ul style="--d:154deg;"><li style="--bg:#faebd7"></li><li style="--bg:#262626"></li><li style="--bg:#faebd7"></li></ul>
	<ul style="--d:1deg;"><li style="--bg:#ffff00"></li><li style="--bg:#262626"></li><li style="--bg:#faebd7"></li></ul>
	<ul style="--d:76deg;"><li style="--bg:#ff69b4"></li><li style="--bg:#262626"></li><li style="--bg:#faebd7"></li><li style="--bg:#262626"></li><li style="--bg:#ff69b4"></li></ul>
	<ul style="--d:18deg;"><li style="--bg:#ffff00"></li><li style="--bg:#262626"></li><li style="--bg:#faebd7"></li><li style="--bg:#262626"></li><li style="--bg:#ffff00"></li></ul>
	<ul style="--d:68deg;"><li style="--bg:#61442c"></li><li style="--bg:#262626"></li><li style="--bg:#61442c"></li></ul>
	<ul style="--d:123deg;"><li style="--bg:#faebd7"></li><li style="--bg:#262626"></li><li style="--bg:#ffff00"></li></ul>
	<ul style="--d:304deg;"><li style="--bg:#faebd7"></li><li style="--bg:#262626"></li><li style="--bg:#faebd7"></li></ul>
	<ul style="--d:359deg;"><li style="--bg:#61442c"></li><li style="--bg:#262626"></li><li style="--bg:#61442c"></li><li style="--bg:#262626"></li><li style="--bg:#61442c"></li></ul>
</main>

body {
  background: cornflowerblue;
  display: grid;
  height: 100vh;
	overflow: hidden;
  place-content: top center;
}
fieldset {
  border: 0;
  display: flex;
  flex-wrap: wrap;
  font-family: system-ui;
  gap: 1ch;
  justify-content: center;
}
form  {
  accent-color: cornflowerblue;
  left: 50%;
  position: fixed;
  translate: -50% 0;
  z-index: 1;
}
label {
  align-items: center;
  background: CanvasText;
  border-radius: 1ch;
  color: Canvas;
  display: flex;
  font-size: x-small;
  gap: 1ch;
  padding: 1ch 2ch;
}
li {
  --h: calc(var(--w) / 6);
  background: var(--bg);
  box-shadow: calc(0px - var(--h)) calc(0px - var(--h)) 0 0px var(--bg);
	grid-area: 1 / 1;
  height: var(--w);
  list-style: none;
  width: var(--w);
  position: relative;
  &::after, &::before {
    background: var(--bg);
    content: '';
    height: var(--h);
    position: absolute;
    width: var(--h);
  }
  &::after {
    clip-path: polygon(0 0, 0 100%, 100% 100%);
    right: 1px;
    top: calc(1px - var(--h));
  }
  &::before {
    bottom: 1px;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    left: calc(1px - var(--h));
  }
  &:nth-of-type(1) {
    left: calc(0px - (2 * var(--h)));
    top: calc(0px - (2 * var(--h)));
  }
  &:nth-of-type(2) {
    left: calc(0px - var(--h));
    top: calc(0px - var(--h));
  }
  &:nth-of-type(4) {
    left: calc(0px - (-1 * var(--h)));
    top: calc(0px - (-1 * var(--h)));
  }
  &:nth-of-type(5) {
    left: calc(0px - (-2 * var(--h)));
    top: calc(0px - (-2 * var(--h)));
  }
}
main {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 10vw;
  padding: 10vw;
  row-gap: 10vw;
}
ul {
  --w: 8vw;
  all: unset;
  animation: rotate 5s linear infinite;
  display: grid;
  rotate: var(--d);
  transform: skewX(-20deg);
}

@keyframes rotate {
  0% { rotate: var(--d); }
  100% { rotate: calc(360deg + var(--d)); }
}