I have a repeating linear gradient like so:
.placeholder {
background: repeating-linear-gradient(to top right, #7722AA 0px, #7722AA 6%, #CC44EE 6%, #CC44EE 13%) transparent;
border: 1px solid #000000;
float: left;
height: 110px;
width: 120px;
}
However in chrome, firefox on Mac and opera the appearance is skewed:
It works fine when in a square, but when it becomes a rectangle it becomes jagged - the same doesn't occur in all other browsers.
What causes this?
jsfiddle
Maybe you want:
.placeholder {
background: repeating-linear-gradient(45deg, #7722AA 0px, #7722AA 6%, #CC44EE 6%, #CC44EE 13%) transparent;
border: 1px solid #000000;
float: left;
height: 110px;
width: 120px;
}
?
One approach is to spread out your gradient a bit more. Adding a 2% gradient transition to either side of the stripe gives a slight blur that obscures the jaggies without eliminating the edge.
repeating-linear-gradient(to top right, #CC44EE 0px, #7722AA 2%, #7722AA 7%, #CC44EE 9%, #CC44EE 14%) transparent
http://jsfiddle.net/mblase75/FrT6Y/
To increase the blur along the stripe edge, increase the 2% to 3% or more and then decrease the 7% to 6% or more to keep the stripes the same size:
repeating-linear-gradient(to top right, #CC44EE 0px, #7722AA 3%, #7722AA 6%, #CC44EE 9%, #CC44EE 14%) transparent
http://jsfiddle.net/mblase75/FrT6Y/5/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With