Get a free trial // Grow your CSS skills // Land your dream job

Flexible triangles using borders?

  • # November 25, 2012 at 4:18 am


    # November 25, 2012 at 4:23 am

    feelings below.. -_-

    # November 25, 2012 at 4:26 am

    I am left with the feeling of yes this must be able to be done with only CSS.
    Is it worth it?
    Maybe not.

    # November 25, 2012 at 5:09 am

    As I thought….if you have a single triangle image (which I don’t have right now), it can be done as a bg image.

    Notice the image maintains a set height and is still a full image but the image is stretched horizontally according to need.

    # November 25, 2012 at 11:34 pm

    # November 26, 2012 at 12:16 am

    Nicely done, @wolfcry911!

    # November 26, 2012 at 12:41 am

    Odd…it’s not working for me in Chrome.

    # November 26, 2012 at 2:29 am

    It seems that Chrome (possibly webkit) doesn’t support linear gradients specified with a “to bottom right” angle (even with the -webkit prefix).

    # November 26, 2012 at 5:19 am

    It doesn’t yet, but will soon. The life of a web developer :p

Viewing 9 posts - 16 through 24 (of 24 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