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

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:

    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

    This reply has been reported for inappropriate content.

    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.

    # December 2, 2014 at 9:35 am

    How about this example?

      position: relative
      font-size: 20px
      &:before, &:after
        content: " "
        border-style: solid
        position: absolute
        width: 0
        height: 0
        z-index: 10
      &:before, &:after
        border-color: transparent transparent $grey2 transparent
        border-width: 0 em(8) em(7) em(8)
        bottom: 0
        left: 50%
        margin-left: - em(8)
        border-color: transparent transparent white transparent
        bottom: -1px
        margin-left: - em(8)

    After you can simple change font-size of .triangle class to make triangles smaller or larger e.g:

      fone-size: 30px

    it works in Chrome, Opera, Safari, FF on Mac OS

    # December 2, 2014 at 9:51 am

    Thanks for necro-posting.

    I don’t think this isn’t any more responsive that using pixel values…(which technically you are) and media queries.

Viewing 7 posts - 1 through 7 (of 7 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