houndstooth background

houndstooth background in pure css

by kpowz

HTML

<div class="la5">
    
    
</div>
<hr />
<div class="la">
    
    
</div>
<hr/>
<div class="la3">
    
    
</div>
<hr/>
<div class="la4">
    
    
</div>
<hr/>
<div class="la2">
    
    
</div>

CSS

.la {
    min-height: 30em;
    background-color: #063657;
    
    background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);
    background-size: 50px 70px;

}

.la3 {
    min-height: 30em;
    background-color: #063657;
    
    background-image: repeating-linear-gradient(45deg, transparent, transparent 15px, rgba(255,255,255,.5) 15px, rgba(255,255,255,.5) 30px);
    background-size: 50px 70px;

}

.la4 {
    min-height: 30em;
    background-color: #063657;
    
    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px);
     background-size: 10px 10px;
}

.la5 {
    min-height: 20em;

    background: linear-gradient(-45deg, white 25%, transparent 25%, transparent 75%, black 75%, black) 0 0,
linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, white 75%, white) 3em 3em
        ,
linear-gradient(45deg, black 17%, transparent 17%, transparent 25%, black 25%, black 36%, transparent 36%, transparent 64%, black 64%, black 75%, transparent 75%, transparent 83%, black 83%) 3em 3em
        ;
background-color: white;
background-size: 6em 6em;
    
}


.la2 {
    min-height: 30em;
    border-bottom: dotted 1px #063657;
   background-color: #063657;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);
    background-size: 40px 50px;

}