3

效果图

  • 怎么实现这种边框,或者背景

clipboard.png

要求

  • css
  • 不使用图片
  • 不使用canvas
  • 不使用js
  • 不用考虑兼容性
冉娃娃 844
1月29日提问
3 个回答
6

已采纳

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
    );
}

clipboard.png

4

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

.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);
}

clipboard.png

2

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


图片描述

撰写答案

推广链接