[已解决]如何以优雅的纯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);
}

Answer 3

你主要是想实现下面那个彩带吧，
可以用一堆span
css有个形变属性

---