Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Generate Diagonal Lines (stripes) In Css

Post a Comment
I would like to know if it is possible to generate diagonal lines in css or svg to cover a div which will allow the background colour of the div to show through. Something like the

Solution 1:

You can try:

HTML:

<divclass="deg45 stripes">TEST</div>

CSS3:

.stripes {
    height: 250px;
    width: 375px;
    -webkit-background-size: 50px50px;
    -moz-background-size: 50px50px;
    background-size: 50px50px;
}
.deg45 {
    background-color: white;
    background-image: -webkit-gradient(linear, 00, 100%100%, color-stop(.25, gray), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, gray), color-stop(.75, gray), color-stop(.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(-45deg, gray 25%, transparent 25%, transparent 50%, gray 50%, gray 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, gray 25%, transparent 25%, transparent 50%, gray 50%, gray 75%, transparent 75%, transparent);
    background-image: -ms-linear-gradient(-45deg, gray 25%, transparent 25%, transparent 50%, gray 50%, gray 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(-45deg, gray 25%, transparent 25%, transparent 50%, gray 50%, gray 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, gray 25%, transparent 25%, transparent 50%, gray 50%, gray 75%, transparent 75%, transparent);
}

FIDDLE

Where you can customize it to your needs as:

-45deg is the amount og the angle you want the stripes to have and gray the color of them. Also with background-size you can define the size of them

Solution 2:

You can use base64 data as a png image. For example:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVQYV2NkIAKckTrzn5GQOpAik2cmjHgVwhSBDMOpEFkRToXoirAqxKYIQyEuRSgK8SmCKySkCKyQGEUghQD+Nia8BIDCEQAAAABJRU5ErkJggg==);

This is a good generator

An example of it at work

Solution 3:

Yes i did it on a btn.

<!DOCTYPE html><html><head><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script></head><body><divclass="container"><buttonstyle=" background-size: 10px 10px; 
            background: repeating-linear-gradient(45deg,#606dbc,#606dbc 10px,#465298 10px,#465298 20px);
            height: 600%;"type="button"class="btn btn-default btn-lg">Large Default Button</button></div></body></html>

Post a Comment for "Generate Diagonal Lines (stripes) In Css"