1、条纹背景
<style type="text/css">
.horizontal-stripes{
width: 200px;
height: 200px;
margin-bottom: 20px;
color: #fff;
/* 原理：#f60 占 50%，从 0%~50% 都是纯 #f60；渐变色从 #f60(起始色) 50% 处开始适度到 #333(完结色) 50% 处，起点也是 50%，因而相当于没有适度；起始色与完结色还剩下 50%，这剩下的 50% 区域按完结色平均分配 */
background-image: linear-gradient(#f60 50%, #333 50%);
background-size: 100% 20px;
}
.veritcal-stripes{
width: 200px;
height: 200px;
margin-bottom: 20px;
color: #fff;
background-image: linear-gradient(to right, #f60 50%, #333 50%);
background-size: 20px 100%;
}
</style>
<body>
<div class="horizontal-stripes"> 横向条纹 </div>
<div class="veritcal-stripes"> 垂直条纹 </div>
</body>
2、收货地址底部斜边框
其实这个边框并不完满，将高度调高后会变成下图这样，有晓得解决的高手请指导下：
<style>
.box{
position: relative;
width: 50%;
height: 150px;
margin: 50px auto;
background-color: #eee;
}
.box::after{
position: absolute;
bottom: 0;
left: 0;
content: ' ';
width: 100%;
height: 4px;
background-image: repeating-linear-gradient(-45deg,
#ff6c6c 0, #ff6c6c 20%,
transparent 20%, transparent 25%,
#1989fa 25%, #1989fa 45%,
transparent 45%,transparent 50%);
background-size: 140px;
}
</style>
<body>
<div class="box"></div>
</body>