Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Responsive triangle

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #42765
    nejcm
    Member

    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!

    #124815
    Paulie_D
    Member

    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.

    #124817
    nejcm
    Member

    Thanks. That was fast :)

    #124818
    Paulie_D
    Member

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

    Anyone? Remember HTML & CSS only.

    #189751
    bitaru
    Participant

    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

    #189757
    Paulie_D
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.