CSS Borders trick to make a triangle

Menu imageSo I am working on a project. A WordPress theme that I want to try and sell on Themeforest.net, and I ran into a problem. I’m using jQuery to do a drop down menu, and I want the submenu to fly out and have a triangle on the left side showing where it came from. Look at the image and you will see what I mean. I was having a terrible time getting that to do what I wanted it to. Which was look like it does in the image you see. I spent about an hour and a half trying to get the stupid thing to work.

Today, I’m browsing my favorite sites, and I come along Jon Rohan’s website. That isn’t anything special, you say. Well, I disagree, because on his site is EXACTLY what I am looking for.

First though, here is the link to the specific page on his site, dinnermint.org.

This CSS trick basically changes a border on something into a shape do to the div having its width and height set to 0. You also give the border a thickness of like 20. You can make all sorts of crazy shapes using a div and its border styles.

Anyway, this fixes my issue nicely, and hopefully you can find some use for it to.

2 Responses to “CSS Borders trick to make a triangle”

  1. Wow, that’s freaking amazing. I never fathomed something that awesome, haha. Man, it’s so strange to think of all the creative things that have come out of CSS like this. Some of the borders didn’t work in IE7, but most did. Really amazing work.

  2. jcDesigns says:

    I don’t know about amazing, but it was exactly what I was looking for. Will I use it again? Probably not, because I had a very specific issue to resolve. I found that by pure luck, and wasn’t even looking for the answer to my issue. When I saw it though, I new right it would work on my menu problem.

Leave a Reply