简单的几个图形

DOM

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;*/}