How to achieve this tilted stripe effect with css or js?

could you tell me how to do this effect?

Mar.13,2021

 * {
      padding: 0;
      margin: 0;
    }

    .button {
      width: 10px;
      height: 5px;
      background: -sharpccc;
      transform: skewX(-45deg);

    }

    -sharpwrap .button {
      float: left;
    }

    .button>div {
      transform: skewX(-45deg);
    }

    -sharpwrap2 {
      width: 10px;
      overflow: hidden;
    }

    -sharpwrap2>div {
      transform: skewY(-45deg);
      height: 10px;
      width: 7px;
    }

html

 <div id="wrap"></div>
  <div id="wrap2"></div>

js

 let a = ""
  for (let i = 0; i < 30; iPP) {
    a += '    <div class="button"></div>'
  }
  $("-sharpwrap").html(a);
  $("-sharpwrap2").html(a);
  for (let i in $(".button")) {
    $(".button").eq(i).css({
      "background": `rgb(` + parseInt(Math.random() * 255) + `,` + parseInt(Math.random() * 255) + `,` +
        parseInt(Math.random() * 255) + `)`
    })
  }
  setInterval(() => {
    for (let i in $(".button")) {
      $(".button").eq(i).css({
        "background": `rgb(` + parseInt(Math.random() * 255) + `,` + parseInt(Math.random() * 255) + `,` +
          parseInt(Math.random() * 255) + `)`
      })
    }
  }, 3000)

ha, after messing around for a long time, a css class is done.
principle is to use border-image and linear-gradient to do

.
  

implement it with css3 gradient ~ another child's shoe has already written the code

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b350a9-404ec.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b350a9-404ec.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?