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

Question

效果图

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

要求

• 纯css

• 不使用图片

• 不使用canvas

• 不使用js

• 不用考虑兼容性

Answer 1

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

Answer 2

具体如下，颜色、间距、旋转方向等自己调；.inline&nbsp;{&nbsp;&nbsp;height:&nbsp;6rpx;&nbsp;&nbsp;width:&nbsp;100%;&nbsp;&nbsp;background-image:&nbsp;linear-gradient( &nbsp;&nbsp;&nbsp;&nbsp;90deg, &nbsp;&nbsp;&nbsp;&nbsp;#fff&nbsp;0%&nbsp;, &nbsp;&nbsp;&nbsp;&nbsp;#fff&nbsp;25%, &nbsp;&nbsp;&nbsp;&nbsp;#ffc01d&nbsp;25%, &nbsp;&nbsp;&nbsp;&nbsp;#ffc01d&nbsp;50%, &nbsp;&nbsp;&nbsp;&nbsp;#fff&nbsp;50%, &nbsp;&nbsp;&nbsp;&nbsp;#fff&nbsp;75%, &nbsp;&nbsp;&nbsp;&nbsp;#ff4647&nbsp;75%, &nbsp;&nbsp;&nbsp;&nbsp;#ff4647&nbsp;100%, &nbsp;&nbsp;&nbsp;&nbsp;#fff&nbsp;100% &nbsp;&nbsp;);&nbsp;&nbsp;background-size:&nbsp;67rpx&nbsp;8rpx;&nbsp;&nbsp;background-position:&nbsp;6rpx&nbsp;0;&nbsp;&nbsp;transform:&nbsp;skew(-48deg)&nbsp;scale(1.3,1); }