Linear Gradient Background Expeiraments

by kpowz

HTML

<div class="zeb">
    
</div>

<div class="zeb2">
    
</div>

<div class="para">
    
</div>

<div class="diag">
    
</div>

CSS

.zeb{
    min-height: 20em;
    background-color: black;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 40px);
    background-size: 50% 50%;
}

.zeb2{
    min-height: 20em;
    background-color: black;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 500%);
    background-size: 50% 50%;
}

.para{
  min-height: 20em;
  background-color: gray;
  background-image: linear-gradient(-35deg, transparent 50%, rgba(255,255,255,.9) 50%);

    
}

.diag{
    min-height: 20em;
    background-color: gray;
background-image: repeating-linear-gradient(45deg, transparent, transparent 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.5) 2px);

}