Grow your CSS skills. Land your dream job.

Stripped background (CSS gradients)

  • # September 12, 2012 at 9:34 am

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

    # September 12, 2012 at 9:58 am

    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.

    # September 12, 2012 at 9:59 am

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

    # September 12, 2012 at 10:12 am

    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.

    # September 12, 2012 at 10:19 am

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

    # September 12, 2012 at 10:22 am

    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

    # September 12, 2012 at 10:40 am

    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.

    # September 12, 2012 at 10:42 am

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

    # September 12, 2012 at 11:04 am

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

    # September 12, 2012 at 11:40 am

    Nice

    # September 12, 2012 at 11:41 am

    Thanks. Was tough.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".