如何以优雅的纯CSS方式实现如下效果

Question

效果图怎么实现这种边框,或者背景要求纯css不使用图片不使用canvas不使用js不用考虑兼容性

Answer 1

repeating-linear-gradient

/* <div class="repeat"></div> */.repeat {  width: 300px;  height: 10px;  background-image: 
    repeating-linear-gradient(
      45deg,
      #00f 0 10px,
      transparent 10px 15px,
      #f00 15px 25px,
      transparent 25px 30px
    );
}

Answer 2

具体如下，颜色、间距、旋转方向等自己调；

.inline {  height: 6rpx;  width: 100%;  background-image: linear-gradient(
    90deg,
    #fff 0% ,
    #fff 25%,
    #ffc01d 25%,
    #ffc01d 50%,
    #fff 50%,
    #fff 75%,
    #ff4647 75%,
    #ff4647 100%,
    #fff 100%
  );  background-size: 67rpx 8rpx;  background-position: 6rpx 0;  transform: skew(-48deg) scale(1.3,1);
}