Is it possible to make a diagonal strip in CSS?

Question

Is it possible to use only CSS (and without images) a background similar to blue in the next photo? If so, how?

script: https://jsfiddle.net/hd74keqq/

.striped-blue { background: #3777BB; padding: 20px;} .striped-blue p { color: #FFF; } 

Answer 1

Maybe this will help you :)

CSS

 div { width: 100%; height:900px; background: repeating-linear-gradient( -55deg, #3777BB, #3777BB 1px, #3072B8 1px, #3072B8 6px ); } 

This is partially similar.

Demo

You can play with properties to suit your needs.

 div { width: 100%; height:900px; background: repeating-linear-gradient( -40deg, #3777BB, #3777BB 1px, #3072B8 1px, #3072B8 4.9px ); } 

Demo

Edit: Here you have more information about the repeating linear gradient.

The formal syntax is:

 repeating-linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ ) 

Additional Information