Grow your CSS skills. Land your dream job.

Responsive triangle

  • # February 15, 2013 at 2:08 pm

    Hello. I’m wondering if it’s possible to make a triangle made of borders from div responsive. Here is the code of that div:

    width:0;
    height:0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid #aad86c;

    This one is’t responsive. If you use ‘%’ instead of ‘px’ it does not work. I really don’t want to use an image here. Thanks for the help!

    # February 15, 2013 at 2:15 pm

    Nope…you can’t use % in borders so responsiveness is something we haven’t been able to manage on this as yet on a pure CSS basis.

    …and we’ve tried.

    # February 15, 2013 at 2:16 pm

    Thanks. That was fast :)

    # February 15, 2013 at 2:18 pm

    That’s not to say someone hasn’t come up with since the last time.

    Anyone? Remember HTML & CSS only.

    # February 15, 2013 at 2:34 pm

    If this is in concert with something like a tooltip bubble, or similar, using it as an arrow, I think you could make it *somewhat* responsive, by replacing px values with em or rem. If your body has the typical font-size: 62.5%; so that 1em is *usually* 10px, then the math is easy when using rem, and not terribly difficult for em.

    The trick would be to set media query breakpoints that appropriately reset font-size at lower resolutions. Ideally, you could use em as a base unit, reduce font-size only on the immediate parent element of the triangle (thus effecting the triangle, but nothing else on the page), and it would shrink the triangle.

    Edit: Yeah, I **cannot** seem to get this to work in practice. Nevermind, I suppose.

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

You must be logged in to reply to this topic.

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