CSS background stripes with 1px white, the rest transparent

Question

I've read CSS background stripes tutorials, but I don't seem to find a solution to this problem. What if I want diagonal white lines of just 1px wide alternating with transparent stripes of about 10px wide? Like this:

The code I have now is:

.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;
}

But this makes blurry, thick white lines. I'm new on this concept.

Answer 1

To get exact pixel dimensions, you can use pixels instead of percentages:

body {
    background: #222;
}

.stripes {
    background: repeating-linear-gradient(
      -75deg,
      #fff, /* White, starting at pixel 0 */
      #fff 1px,  /* White, continuing to pixel 1 */
      transparent 1px, /* Transparent beginning at pixel 1 */
      transparent 10px /* Transparent ending at pixel 11 (10 + 1) */
    );
    width: 180px;
    height: 56px;
    z-index: 99;
    position: absolute;
    left: 0;
    top: 0;
}

.stripes2px {
    background: repeating-linear-gradient(
      -75deg,
      #fff, /* White, starting at pixel 0 */
      #fff 2px,  /* White, continuing to pixel 2 */
      transparent 2px, /* Transparent beginning at pixel 2 */
      transparent 12px /* Transparent ending at pixel 14 (12 + 2) */
    );
    top: 56px;
}

.stripes-fade {
    background: repeating-linear-gradient(
      -75deg,
      #fff, /* White, starting at pixel 0 */
      #fff 1px,  /* White, continuing to pixel 1 */
      transparent 2px, /* Transparent beginning at pixel 2 */
      transparent 10px /* Transparent ending at pixel 12 (10 + 2) */
    );
    top: 112px;
}

<div class="stripes"></div>
<div class="stripes stripes2px"></div>
<div class="stripes stripes-fade"></div>

An alternative method, but gives the same results. Something to do with the way browsers render (no anti-aliasing):

body {
    background: #222;
}

.stripes {
    width: 180px;
    height: 56px;
    z-index: 99;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
}

.stripes:before {
    content: '';
    display: block;
    background: repeating-linear-gradient(
      0deg,
      #fff, /* White, starting at pixel 0 */
      #fff 1px,  /* White, continuing to pixel 1 */
      transparent 1px, /* Transparent beginning at pixel 1 */
      transparent 10px /* Transparent ending at pixel 11 (10 + 1) */
    );
    position: absolute;
    /* Just a bunch of random numbers to get it to cover - no thought went into these. */
    top: -100%;
    left: -200%;
    width: 400%;
    height: 1000%;
    transform: rotate(-75deg);
}

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