收货地址下边的平行四边形彩色线条

以小程序为例


    
    
    
    
    
    
    
    

.city:nth-child(odd) {
    width:60rpx;
    height:10rpx;
    margin-right: 23px;
    background-color: #0076FF;
    color: #333;
    transform: skew(-45deg);
    float:left;
}
.city:nth-child(even) {
    width:60rpx;
    height:10rpx;
    margin-right: 23px;
    background-color: #FF9E57;
    color: #333;
    transform: skew(-45deg);
    float:left;
}  

 

效果图

收货地址下边的平行四边形彩色线条_第1张图片

 

你可能感兴趣的:(收货地址下边的平行四边形彩色线条)