使用css实现斑马线（面试转载）

文章原文请参考：（自己练习）

https://blog.csdn.net/i_dont_know_a/article/details/88695201

页面效果

代码附上：

    
    
    
    
    
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-content: space-around;
            width: 1000px;
            height: 900px;
        }
        .bg {
            width: 300px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            color: #ffffff;
            font-size: 36px;
        }
        
        .bg_one {
            
            background: linear-gradient(#cc95c0, #7aa1d2);
        }
        
        .bg_two {
            
            background: linear-gradient(#cc95c0 50%, #7aa1d2 50%);
        }
        
        .bg_three {
            background: linear-gradient(#cc95c0 50%, #dbd4b4 50%);
            background-size: 100% 40px;
        }
        
        .bg_four {
            
            background: linear-gradient(#cc95c0 33.3%, #dbd4b4 0, #dbd4b4 66.6%, #7aa1d2 0);
            background-size: 100% 40px;
        }
        
        .bg_five {
            background: linear-gradient(to right, #cc95c0 50%, #dbd4b4 0);
            background-size: 40px 100%;
        }
        
        .bg_six {
            
            background: linear-gradient(to right, #cc95c0 33.3%, #dbd4b4 0, #dbd4b4 66.6%, #7aa1d2 0);
            background-size: 40px 100%;
        }
        
        .bg_seven {
            
            background: linear-gradient(45deg, #cc95c0 25%, #dbd4b4 0, #dbd4b4 50%, #cc95c0 0, #cc95c0 75%, #dbd4b4 0);
            background-size: 40px 40px;
        }
        
        .bg_eight {
            
            background: linear-gradient(45deg, #cc95c0 0, #cc95c0 16.66%, #dbd4b4 16.66%, #dbd4b4 33.33%, #7aa1d2 33.33%, #7aa1d2 50%, #cc95c0 50%, #cc95c0 66.66%, #dbd4b4 66.66%, #dbd4b4 83.33%, #7aa1d2 83.33%, #7aa1d2);
            background-size: 40px 40px;
        }
        
        .bg_nine {
            background: #cc95c0;
            background-image: repeating-linear-gradient(45deg, hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1) 15px, transparent 0, transparent 30px);
        }
        
        .bg_ten {
            background: repeating-linear-gradient(45deg, #cc95c0, #cc95c0 15px, #dbd4b4 0, #dbd4b4 30px);
        }
        
        .bg_eleven {
            background: linear-gradient(45deg, #cc95c0 50%, #dbd4b4 0);
            background-size: 40px 40px;
        }
        
        .bg_twelve {
            background-image: linear-gradient(0deg, rgba(200, 0, 0, .5) 50%, transparent 50%), linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 50%);
            background-size: 40px 40px;
        }
    


    
    
        实例一
        实例二
        实例三
        实例四
        实例五
        实例六
        实例七
        实例八
        实例九
        实例十
        实例十一
        实例十二