The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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

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


    # November 28, 2012 at 5:12 am

    You might want to read this thread.

    # November 28, 2012 at 6:37 am

    Thanks Paulie
    Just wondering what the image would have looked like in here 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.

    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.

    # 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?

    # November 28, 2012 at 8:11 am


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

    # 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!

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

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

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

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed