8.css背景图案

简单的几个图形

DOM

<div class="linear-container">
    <div class="c1 linear1">
                
    </div>
    <div class="c1 linear2">
                
    </div>
    <div class="c1 linear3">
                
    </div>
</div>

css

.linear-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.c1{
    width: 510px;
    height: 270px;
    border: 1px solid #eee;
}
.linear1{
    background: repeating-linear-gradient(45deg,#58a,#58a 15px,#fb3 0,#fb3 30px);    
}
.linear2{
    background: #58a;
    background-image: repeating-linear-gradient(45deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 15px,transparent 0,transparent 30px);
}
.linear3{
                
    background-image: linear-gradient(rgba(85,136,170,.3) 50%,transparent 0),linear-gradient(90deg,rgba(85,136,170,.3) 50%,transparent 0);
    background-size: 30px 30px;
                
    /*background-repeat: no-repeat;*/
}