Forums

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

Home Forums CSS Flexible height triangle to go on the side of a div filled with text

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #41039
    jw
    Participant

    Hi I’m trying to work out how to get the following working cross browser.

    I’d like a rectangular content area which can have an arbitrary amount of content.
    As the content varies between each content holder I’d like to extend the height of the triangle in a scalene kind of effect.

    I was wondering the best way to achieve adding a triangle to the right hand side of a bunch of content boxes that will have differing heights. Not too sure where to start as the css methods all rely on fixed heights.

    Any help would be most appreciated.
    Thanks!

    Triangle

    #115729
    Paulie_D
    Member
    #115739
    jw
    Participant

    Thanks Paulie
    Just wondering what the image would have looked like in here http://codepen.io/Paulie-D/pen/ixKLf it’s no longer hosted?

    So seems like background images are the go for now? I was thinking svg or canvas but probably more hassle than gain.

    #115741
    Paulie_D
    Member

    Here you go, I’ve updated it to a new image. http://codepen.io/Paulie-D/pen/blkjL

    I must make a triangle image at some point. :)

    #115743
    Paulie_D
    Member

    OK…made one….here’s the way i would do your issue.

    http://codepen.io/Paulie-D/pen/LufyF

    #115744
    jw
    Participant

    Thanks so much for that.. I think that would actually work really well! I was thinking of trying multiple colours for the arrow and playing with converting a vector to a font and using that as the content but then would have the same issue.

    Thanks so much for your help!

    #115747
    jw
    Participant

    Hi Paulie,
    I’ve tried with a large amount of content and for some reason the background image then starts half way down.. any guess as to what’s going on there?

    http://codepen.io/anon/full/JHrIy

    #115750
    Paulie_D
    Member

    @thomen.

    Yes, I had the same issue…I’d forgotten to add a couple of properties. The Codepen has been updated.

    http://codepen.io/Paulie-D/pen/LufyF

    #115767
    jw
    Participant

    found i could fix it by just using :before! :)

    Thanks again for your help! I really appreciate it!
    http://codepen.io/anon/pen/JHrIy

    now how to work out how to do a centered arrow for a nav menu with a drop shadow!

    #115880
    otc
    Participant

    Hello Thomen,

    Not only can you use :before/:after but instead of having an image as your arrow you can make your own arrow using CSS.

    .box:after {
    display:block;
    position:absolute;
    content:'';
    margin-top: 0px;
    margin-left: 60px;
    border-left: 10px solid red;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    }

    And Voila you got yourself an arrow, you can play around with the pixels for each top left right bottom to create different kinds of arrows.

    Hope you like this

    #115878
    Paulie_D
    Member

    @otc No he can’t use that method because he won’t know the size of the borders and you can’t use a % figure in a border declaration.

    #115897
    jw
    Participant

    Any way you could get it working using an svg? I tried but it doesn’t seem to scale full height..

    http://codepen.io/anon/pen/JHrIy

    #115905
    jw
    Participant

    i wonder if using canvas to calculate the box height and drawing the arrow would be better

    #115910
    Paulie_D
    Member

    The image was about 1.5k. Canvas would probably be lighter but less well supported.

Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘CSS’ is closed to new topics and replies.