Stripped background (CSS gradients)

[Kitty Giraudel]

Hi guys !

Does anyone know how to make a vertically stripped background on a rotated element ?
There is a reduced test case : http://jsfiddle.net/YQp75/29/. Please test with latest Chrome / Firefox.

Thanks and congratulations on the one who manage to do this, if it’s even possible. ;)

[Paulie_D]

Obviously this isn’t possible as it stands. The gradient is doing exactly what it is supposed to but you have rotated the element.

You would need a different gradient on the rotated element.

[Kitty Giraudel]

The point is I can’t figure how to deal with this different gradient.

[Kitty Giraudel]

Emad Elsaid (@blaz_boy) on Twitter proposed me two solutions :
– Needs an extra element : http://jsfiddle.net/YQp75/19/
– Uses a pseudo-element instead of the extra element : http://jsfiddle.net/YQp75/20/

Those are nice work arounds, but in my case I can’t afford any other (pseudo-)element. I’m looking for a solution with one single element, if possible.

[Paulie_D]

Here you go. http://codepen.io/Paulie-D/pen/BFEsl

[Kitty Giraudel]

I don’t know which browser you’re using, but it doesn’t work for me (Chrome 21 / Aurora 17 Windows XP).

I want the background of the second div to be the same as the first one. So vertical stripes. :P

[Kitty Giraudel]

Mads Cordes (@mobilpadde) on Twitter tried with a -webkit-mask : http://jsfiddle.net/Mobilpadde/D7dEf/3/. It works, but it’s -webkit- only, so not efficient enough.

Sandy Jackiewicz (@SandyEJack) on Twitter tried with an image encoded base64, via Patternify. I dug into it and the best I could do is : http://jsfiddle.net/ZumRs/. Not great.

[Paulie_D]

Weird…I had it working but it’s gone wonky.

[Kitty Giraudel]

Finally found the solution : http://jsfiddle.net/YQp75/32/.

[Paulie_D]

Nice

[Kitty Giraudel]

Thanks. Was tough.

[Author]

Posts