Forums

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

    # 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 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag