JSFiddle - React, Tailwind, and code Playground

by namnium1125

HTML

<div class="chld group-1">
要素1
</div>
<div class="chld group-1">
要素2
</div>

<div class="chld group-2">
要素3
</div>
<div class="chld group-2">
要素4
</div>

<div class="chld group-3">
要素5
</div>
<div class="chld group-3">
要素6
</div>
<div class="chld group-3">
要素7
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

.chld {
  position: relative;
  margin: 6vh 10vw;
  width: 80vw;
  height: 10vh;
  background-color: #888888;
}

JavaScript

var nth = 0;
const GROUP_NUM = 3;

const COLORS = [
  ["ff0000","dd0000"]
 ,["0000ff","0000dd"]
 ,["00ff00","00dd00"]
];

for(let i=0; i < GROUP_NUM; i++){

  let n = document.getElementsByClassName("group-"+(i+1)).length;

  let css =
`div:nth-of-type(${nth+1})::before {
  content: "";
  position: absolute;
  top: -2vh;
  left: -5vw;
  width: 90vw;
  height: calc(calc(${n} * 10vh) + calc(${n-1} * 6vh) + 4vh);
  z-index: -1;
  background-image: url(http://placehold.jp/${COLORS[i][0]}/${COLORS[i][1]}/50x50.png);
  background-repeat: repeat;
}`;

  document.head.innerHTML += "<style>"+css+"</style>";
  nth += n;
}