- This topic is empty.
-
AuthorPosts
-
November 28, 2012 at 3:31 am #41039jwParticipant
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 #115729Paulie_DMemberYou might want to read this thread. https://css-tricks.com/forums/discussion/20735/flexible-triangles-using-borders#Item_24
November 28, 2012 at 6:37 am #115739jwParticipantThanks 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 #115741Paulie_DMemberHere 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 #115743Paulie_DMemberOK…made one….here’s the way i would do your issue.
November 28, 2012 at 7:34 am #115744jwParticipantThanks 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 #115747jwParticipantHi 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 #115750Paulie_DMemberYes, 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 #115767jwParticipantfound i could fix it by just using :before! :)
Thanks again for your help! I really appreciate it!
http://codepen.io/anon/pen/JHrIynow 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 #115880otcParticipantHello 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 #115878Paulie_DMember@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 #115897jwParticipantAny 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 #115905jwParticipanti wonder if using canvas to calculate the box height and drawing the arrow would be better
November 29, 2012 at 8:42 am #115910Paulie_DMemberThe image was about 1.5k. Canvas would probably be lighter but less well supported.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.