Generate diagonal lines (stripes) in CSS

Question

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 following.

If anyone has an example that would be helpful.

enter image description here

Does this answer your question? [CSS Background Stripes on div](https://stackoverflow.com/questions/37990812/css-background-stripes-on-div) — vsync, Oct 24 '20 at 14:34

score 6 · Answer 1 · answered May 13 '14 at 10:18

You can try:

HTML:

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

CSS3:

.stripes {
    height: 250px;
    width: 375px;
    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    background-size: 50px 50px;
}
.deg45 {
    background-color: white;
    background-image: -webkit-gradient(linear, 0 0, 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

This doesn't work for all orientations. Using 55deg for example makes the pattern look tiled rather than striped. Is there a way around this? — Amyunimus, Feb 23 '15 at 06:18

score 2 · Accepted Answer · answered May 13 '14 at 10:19

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

score 1 · Answer 3 · answered May 26 '21 at 13:49

Yes i did it on a btn.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
 
     
  <button style=" 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>

score 1 · Answer 4 · answered Jul 13 '22 at 04:13

There's a tool called stripe generator which solely purposes to create striped images.

http://www.stripegenerator.com/index.php

When done, tweak as required using the following css:

.stripes {
  background-image: url(/assets/images/stripe.png);
  background-position: 4px 0;
  background-size: 16px;
}

Generate diagonal lines (stripes) in CSS

4 Answers4

Linked