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.

    # December 2, 2014 at 9:35 am

    How about this example?

    
    .triangle
      position: relative
      font-size: 20px
      &:before, &:after
        content: " "
        border-style: solid
        position: absolute
        width: 0
        height: 0
        z-index: 10
    
    .triangle-top
      &: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)
      &:after
        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:

    
    .triangle.large
      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.

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