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. ;)
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.
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.
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. ;)
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.
The point is I can't figure how to deal with this different gradient.
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.
Here you go. http://codepen.io/Paulie-D/pen/BFEsl
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
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.
Weird...I had it working but it's gone wonky.
Finally found the solution : http://jsfiddle.net/YQp75/32/.
Nice
Thanks. Was tough.