CSS

The idea is a box with zero width and height. The actual width and height of the arrow is determined by the width of the border. In an up arrow, for example, the bottom border is colored while the left and right are transparent, which forms the triangle.

Hey Tarun!
As it is only made up of border, all you can do is increase the size of that border, if you really wish to, because that’s all you can do to it. And you’ll have to give negative margin of equal pixels as those of the border size to maintain alignment.

Update: Changing the border style to “inset” on the transparent sides of the element seems to fix this issue in Firefox 5 and 6. Other browsers continue to render the triangles fine even after this border-style adjustment.

You do some limited drop shadows using a pseudo-element. Just position it a little different than the original triangle shape and then change the color and/or transparency. A little rotation looks nice with this effect, too. I saw it in a NetTuts piece recently.

The problem that some people have been reporting with inaccurate edges is to do with antialiasing and the fact that transparent is equivalent to rgba(0, 0, 0, 0)—transparent black. When combined with antialiasing, this produces a result which is not what the author intended. I am not aware whether any browsers used antialiasing back in mid-2009, but now, Firefox distinctly does.

I am in the process of writing a blog post (as part of starting a blog, which makes it take longer…) dealing with this particular subject with full details, explanations, the caveats, et cetera, and I initially planned on waiting till I had that done before posting this. But as it’s been several weeks since I began to plan it and will probably be at least as many more until it’s ready and posted, I figured I should try to stop people using transparent when they don’t mean it before it’s too too late.

My general recommendation is to avoid using transparent unless you know that it’s suitable (i.e. black is the touching colour). If you have to care about browsers that don’t support rgba() values (IE8 and earlier), then specify it as transparent and add a border-left/right/top/bottom-color value after it with the correct rgba value to override it and make it correct.

I was just playing around with the antialiasing issue and found that if I set the border widths to make the triangle symmetrical and then do a scale transform to the triangle to stretch it to the right dimensions, it forces the browser to antialias the edges and gets rid of the jaggedness.

I’ve noticed a problem in IE9 if you use this to style a button as an arrow. If you define a style for all 4 borders, it will show them all (even if they’re transparent). Since you’ll want to reset all of the borders to avoid the default button style, this causes a problem. It also does some funny stuff with the sizes, so even if you only define the 3 sides you need, it doesn’t look right.

So far, the best I’ve found for a workaround is to use a <a> (or a div) instead, even though it’s less semantic.

Hi Chris, I watched your video on vimeo and you went a mile a minute. I have a love to be able to create angled nav tabs with variable widths for text. I have been attempting to modify a PVII menu set, but have encountered a problem that I’m not sure arrows can solve due to the width of the borders. I can only show you by example the fixed width image based version of the project I’m trying to duplicate in CSS:http://heavy-construction.us/
Notice the yellow line border on rollover. Now here is the project so far: http://heavy-construction.us/test.html. Using the arrows let me create an angled tab, but the hover loses the yellow border. Right now I’m using a background repeating image gradient for each state of the nav buttons, and I could replace it with a CSS3 gradient fill, but I don’t think anything I’ve seen can create the narrow yellow 45 degree border, unless perhaps 2 triangles overlapping?

This is based on the Spry Widget for menus in DW, but for some reason it doesn’t start the gradient at the full left of the menu tab.
And I’ve not been able to figure out how to at the yellow 45degree border to the hover.

Question: is it possible to assign more than one of these “triangles” to an element? I’m thinking of creating star shapes by assigning multiple border-based triangles to a square div. Will that work or does the :after pseudo-class preclude that?

Looks great. I am a total newbie to Css at this level. I need to take a fast track to showing a callout with a triangle pointing down or to the left depending on which type of control I assign it to. How do I put this use of triangles together with a rectangulat or rounded-rectangular callout box?
Thanks in advance,
file-monger

Uh, this is a departure from the above discussion, but if anyone knows how to do it…

I am looking to create a floating triangle that points northeast, to be placed in the upper corner of the right column of a 3-column page (right and left columns narrow, and of equal width), such that as one scrolls down the page, the contents of the RH column disappears under the floating (always on top) triangle.

Here is the idea in practice (eky’s Triangle Generator (Top Right) may do the trick, I haven’t tried it yet):

Is a very valid concern. I seem to be having this problem and the examples I have seen all reproduce the issue. In chrome the left arrow is 2px smaller that the right facing arrow. ONLY chrome! I cannot fix this. So anytime the arrows are used close together and small – the difference is very noticeable. This is a huge problem for sites that want to be image and sprite free but must be cross browser compatible. Oh woe is me!!!

When I apply the fix from Dan :

-webkit-transform:rotate(360deg);

It smoothes the edges making the issue less noticeable in large examples but leaves the smaller ones still looking too different.

Hi, I have been updating my website and have been trying to change the arrows. Right now my arrows are coded using javascript but the rest of my website is coded with HTML AND CSS. When I put in the code Otto posted, it worked and the arrows show up but I am trying to figure out how to get the arrows to click to the next picture as well as being able to click the thumbnails. Can anyone help with that? I also want the arrows on the middle of both sides of the picture rather than on the bottom.

I had no such luck with that exact situation going on about a week or two ago now!

I believe when you edit the border element for the triangle, it defeats the purpose; as it changes the shape, position and size of the arrow head. The transparent element of the solid border is very important; so I don’t really see a way to amend the border to suit the situation.

I had to just use a good contrast- with a strong fill colour for the arrow, to give that bold effect.

I know this is no solution, just thought I’d let you know how I simply over came this, by amending my original proposed layout.

Let me know if you find a solution!

(Feel free to correct me if I am wrong with any of the above statements)

I came across a way to do this using :before and :after, essentially creating another triangle behind the front one that is slightly larger so looks like a border.. I used it to create a tooltip like this sort of thing:

I looked up on making straight double headed arrows using pure css but didn’t find anything, so I did a little tweaking of the given snippet myself and Volla ! Here it is… (In making these, I really got a hold of pseudo elements and how they work(:before and :after))
Change the degrees to ’90’ in rotate class to make the arrow horizontal or tilt it to any angle you want to.

What about if I wanted to ad text inside the triangle is that possible?
I have tried it but the text breaks after each word and im assuming this is because the div has 0 hight and width so if any1 has a solution please let me know :)

I came across a “caret”, but could not replicate it in my code. After much poking around I found the original code in the CSS where the code worked, but I did not understand the logic. I did a search on Google and landed on your site. Great explanation.

Excellent trick! For those who haven’t already thought of it you can place a slightly smaller triangle inside of your first one to create a nice little arrow. By positioning with negative margins (or similar) it’s easy to create a Speech Bubble look to your main

This is great, thanks a lot. I just took so long to find your post. Django, to put a border on the triangle, you should add one more outer div that will have border width a little larger than the original triangle’s border width with the color of your choice. Let me know if that works.

I created responsive CSS-only triangles using one div: Pure CSS responsive triangles. It takes advantage of padding being calculated against parent’s width to cover a big fixed-width triangle. For an up-pointing triangle and 100% width:

Great article, I’ve referenced it many times. I’m playing around with making a speedometer partially as a learning exercise for transforms and partially because working with a lot of automotive manufacturers they like their data represented in real dashboard looking widgets. I’m having a weird thing with the triangle I’m using as the “needle” on the gauge, though, where it looks really blocky (like it’s from the original Nintendo or something). Is there anything I can do to make that better?

Note: The BACKGROUNDneeds to beTRANSPARENT/NONEExplanation: This might not be clear, but even though the width and height are 0, any background appears “behind” those transparent borders.
So if you are for example editing an existing element with black background and you would set black bottom border and transparent left/right borders – you would actually get a rectangle :)
Hope this helps someone :)

1) use a font arrow e.g. → ( &amp;#8592 ) , you can google “ascii arrows” for more
2) use HTML&CSS (triangle will have to be borderized, but check this out):
It is basically doing a rectangle and triangle next to each other (using inline-block)
and setting vertical-align: middle to both of them so they get verticaly-centerized :)

Can someone post an example of the original right arrow code used in an HTML paragraph? When I tried it, the paragraph is positioned below the arrowhead. If I put the tag at the end of the paragraph, the text is squished into a long narrow column.
For example,

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.