CSS Stripes, repeating-linear-gradient bug

user_8802428 0
Viewed 781

I have a striped divider in CSS, with repeating linear gradient, but it is doing some strange thing, here is an image :

Bug

As you can see, the thickness of some of the stripes are not the same, I would like to have the striped divider like this, but all with the same "font-weight", I tried to fix the code adding or reducing pixels, but not working

Here is the code :

.striped_divider {
height: 20px;
    background: -webkit-repeating-linear-gradient(135deg,               transparent 2px, transparent 7px,#cccccc 8px,#cccccc 8px);
    background: -o-repeating-linear-gradient(135deg, transparent        2px, transparent 7px,#cccccc 8px,#cccccc 8px);
    background: repeating-linear-gradient(-45deg, transparent 2px,      transparent 7px,#cccccc 8px,#cccccc 8px);
}
<div class="striped_divider"></div>

linear-gradients css
3 Answers

You can do nothing, this is how gradient are rendred when we deal with small close values (especially in Google Chrome, in Fiferfox it should be better).

Increase the values and you will see that the effect will slowly disappear:

.striped_divider0 {
  height: 20px;
  margin:5px;
  background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 8px, #cccccc 8px);
}

.striped_divider {
  height: 20px;
  margin:5px;
  background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 7px, #cccccc 8px);
}

.striped_divider1 {
  height: 20px;
  margin:5px;
  background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 7px, #cccccc 10px);
}
.striped_divider2 {
  height: 20px;
  margin:5px;
  background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 7px, #cccccc 15px);
}
<div class="striped_divider0"></div>
<div class="striped_divider"></div>
<div class="striped_divider1"></div>
<div class="striped_divider2"></div>

You can try skew transformation, it should give better result:

.striped_divider {
  height: 20px;
  margin: 5px;
  background: repeating-linear-gradient(to right, transparent 2px, transparent 9px, #cccccc 10px, #cccccc 10px);
  transform: skew(-45deg);
}

.striped_divider1 {
  height: 20px;
  margin: 5px;
  background: repeating-linear-gradient(-45deg, transparent 2px, transparent 7px, #cccccc 8px, #cccccc 8px);
}
<div class="striped_divider"></div>
<div class="striped_divider1"></div>

user_86203330

As you can see in the example below (I've added a css zoom) the lines are indeed the same width. As @Roy already said, it's just an optical illusion.

Edit: I noticed I didn't provide you with a possible solution. As already noted by @Roy, a possible solution would be to repeat an image. The image doesn't have to be particularly high quality, so I don't think it will influence your performance.

.striped_divider {
height: 20px;
    background: -webkit-repeating-linear-gradient(135deg,               transparent 2px, transparent 7px,#cccccc 8px,#cccccc 8px);
    background: -o-repeating-linear-gradient(135deg, transparent        2px, transparent 7px,#cccccc 8px,#cccccc 8px);
    background: repeating-linear-gradient(-45deg, transparent 2px,      transparent 7px,#cccccc 8px,#cccccc 8px);
transform: scale(2.5);
}
<div class="striped_divider"></div>

user_36040860

It indeed seems like a rendering issue, at least in Chrome.
To get around this, you can use linear-gradient & background-size instead:

.striped_divider {
    height: 20px;
    background-image: linear-gradient(-45deg,
    #cccccc 6.25%,
    #ffffff 6.25%,
    #ffffff 50%,
    #cccccc 50%,
    #cccccc 56.25%,
    #ffffff 56.25%,
    #ffffff 100%
  );
  background-size: 8px 8px;
}
<div class="striped_divider"></div>

I made this using https://stripesgenerator.com

user_8583960
Related