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

could you tell me how to do this effect?

Javascript css
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

Previous: [QuasarJs]: how does Quasar use custom icons

Next: How to make the juxtaposed div highly adaptive

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu