The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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 : 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 :
    – Uses a pseudo-element instead of the extra element :

    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.

    # 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 : 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 : 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 :

    # September 12, 2012 at 11:40 am


    # 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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed