[solved] how to achieve the following effects in an elegant, pure CSS way

effect

  • how to implement such a border, or background

clipboard.png

requirements

  • Pure css
  • do not use pictures
  • do not use canvas
  • do not use js
  • Don"t worry about compatibility
May.27,2022

repeating-linear-gradient

/* <div class="repeat"></div> */

.repeat {
  width: 300px;
  height: 10px;
  background-image: 
    repeating-linear-gradient(
      45deg,
      -sharp00f 0 10px,
      transparent 10px 15px,
      -sharpf00 15px 25px,
      transparent 25px 30px
    );
}

clipboard.png


;


clipboard.png



span
css


Menu