Grow your CSS skills. Land your dream job.

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

  • # November 28, 2012 at 3:31 am

    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

    # November 28, 2012 at 5:12 am

    You might want to read this thread. http://css-tricks.com/forums/discussion/20735/flexible-triangles-using-borders#Item_24

    # November 28, 2012 at 6:37 am

    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.

    # November 28, 2012 at 6:42 am

    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. :)

    # November 28, 2012 at 7:10 am

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

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

    # November 28, 2012 at 7:34 am

    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!

    # November 28, 2012 at 8:02 am

    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

    # November 28, 2012 at 8:11 am

    @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

    # November 28, 2012 at 6:52 pm

    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!

    otc
    # November 28, 2012 at 10:00 pm

    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

    # November 29, 2012 at 12:59 am

    @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.

    # November 29, 2012 at 6:52 am

    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

    # November 29, 2012 at 7:22 am

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

    # November 29, 2012 at 8:42 am

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

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

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