Despite reviewing numerous CSS background stripe tutorials, I have been unable to find a solution to my specific dilemma. How can I achieve a design with diagonal white lines that are only 1px wide alternating with transparent stripes that are approximately 10px wide? Something like this:
https://i.sstatic.net/gynpF.jpg
At present, the code I am working with looks like this:
.stripes {
background: repeating-linear-gradient(
45deg,
transparent 46%, #fff 49%, #fff 51%, transparent 55%
);
width: 180px;
height: 56px;
z-index: 99;
position: absolute;
left: 0;
top: 0;
}
Unfortunately, this code results in blurry and thick white lines, which is not the desired outcome. As I am relatively new to this concept, any guidance or assistance would be greatly appreciated.