线性，纹路 渐变 边框

.hr {
background: -webkit-repeating-linear-gradient(135deg, #F83737 0, #F83737 20%, transparent 0, transparent 30%, #4998FA 0, #4998FA 45%, transparent 0, transparent 50%);
background: repeating-linear-gradient(-45deg, #F83737 0, #F83737 15%, transparent 0, transparent 25%, #4998FA 0, #4998FA 40%, transparent 0, transparent 50%); //渐变背景
-webkit-transform: skewX(-45deg); //矩形倾斜
transform: skewX(-45deg);  //矩形倾斜
background-size: 140rpx;
height: 8rpx;
}

效果