Forums

thomen

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

Paulie_D

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

thomen

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.

Paulie_D

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

Paulie_D

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

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

thomen

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!

thomen

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

Paulie_D

@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

thomen

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

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

Paulie_D

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

thomen

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

thomen

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

Paulie_D

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

treehouse : what would you like to learn today?

Forums

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