Grow your CSS skills. Land your dream job.

Flexible triangles using borders?

  • # November 25, 2012 at 4:18 am

    Nope.

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

    http://codepen.io/Paulie-D/pen/ixKLf

    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

    http://codepen.io/wolfcry911/pen/yiBhK

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

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