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!# 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 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 10:00 pm
Not only can you use :before/:after but instead of having an image as your arrow you can make your own arrow using CSS.
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
You must be logged in to reply to this topic.