HTML
You can make them with a single div. It’s nice to have classes for each direction possibility.
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
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.
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}
Demo
See the Pen Animation to Explain CSS Triangles by Chris Coyier (@chriscoyier) on CodePen.
Examples
Dave Everitt writes in:
For an equilateral triangle it’s worth pointing out that the height is 86.6% of the width so (border-left-width + border-right-width) * 0.866% = border-bottom-width
Trippy! I can’t get my head around it!
Same here..quite tricky!
Hi.
How can i change the color inside the triangle ?
And say, if i just need to make sure that the bottom part of the triangle is not there, how do i do that as well ?
Hey Ayush! You could change to color of the triangle by changing the colors in the visible border
Hey thank you very much!
It worked!
But can you tell me how to give a border to this type of triangle?(As it is only made up of the border of a div!!)
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.
Cool explanation!
awesome explaination
I turned this into a sass mixin if anyone is interested.
I wrote a little addition to this article to achieve the same but with some functional SCSS to the DRY rescue.
http://powdertothepeople.tv/2015/06/29/Functional-SCSS/
Thank you for the clear explanation!
There are several pages which show how to put arrows on tooltips, etc but they left me completely mystified as to how they worked. Now at last, thanks to this page, I understand!
Just wow. Couldn’t understand before. This explanation just nailed it. Thanks so much!
It’s basicly like a giant 3D border-corner. (when the left and top border-color are different the edge is diagonal, that’s being used to make this triangle).
Thanks, TeMc, now it all makes sense.
By the way, it’s fun to play with the inner div’s right border width, and change the shape and size of the triangle!
thanks for making it clear.. thanks even to admin to share a lovely tricks :) am very greatful to this website.. :)
Thanks for the reminder! It hass been so long since I’ve noticed how different border colors act together (think table cells).
Clever. I like seeing CSS doing things it shouldn’t
Can you turn it?
Yep:
Obviously, replace the “1” with whatever you want!
http://www.cssplay.co.uk/menu/flag
Wow, nice job with the flag on your link…
Also, I wanted to ask why do you use ‘dashed’ instead of ‘solid’? I wasn’t able to understand the difference..
Cheers & congrats again.
Wow! Sweet!
Hi, ‘dashed’ makes it to render nicely when the degree is not 90°.
Here’s one I use a fair amount for various things:
You can play with the border sizes to get various depths and such.
This is the simplest example, I love it
Thanks, Otto. I wasn’t sure what the syntax was for 2 values on the border-color until I found this article, which may help others;
https://developer.mozilla.org/en-US/docs/Web/CSS/border-color
Too cool! Love the way it is explained
Anyone know why this looks like crap in webkit?
http://img825.imageshack.us/img825/3002/screenshot20100830at827.png
Maybe webkit can’t draw it the right way?
If the dimensions of the triangle aren’t symmetrical, you tend to get those jagged lines. It appears to be more noticeable in Webkit, for some reason–not sure why.
You may have figured this out, but here goes anyway:
For webkit, to get the lines smooth, add the following rule:
transform: rotate(360deg);
Play with different deg depending on your arrow’s direction.
try adding “box-shadow: 0 0 2px orange;” to the triangle. it might help. if not reducing the “2px” in it or incressing will change the blur strangth of the shadow.
Like it. Thanks.
Cool trick, I tried it first after seeing it elsewhere.
Then I came across the ivy-leaf trick on this website, and if you want the triangle to scale with the text, change the ivy leaf to a triangle.
down: \25bc
up: \25b2
right: \25b6
I couldn’t find a “map”, but if you play around changing the last 4 digits in the url, you can find all kinds of cool stuff.
http://www.decodeunicode.org/en/u+25bc
This is amazing!! Thanks for sharing..
You can use those triangles to create Real-time 3D objects in IE6. Yes, IE6!
http://www.uselesspickles.com/triangles/
Borders can also build a house:
http://www.designdetector.com/tips/3DBorderDemo2.html
I noticed a small issue with this technique in Firefox 5.0 (Win). FF 5.0 renders a light stroke on the front sides of the triangle. Here’s a link to a jsFiddle that replicates the issue:
http://jsfiddle.net/brightlight/4DmFk/
Obviously, you’ll need to view that in FF 5.0 (Win) to see what I’m talking about.
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.
Thanks for the inset tip! I’ve been trying to eliminate that thin stroke for a day!!
great tutorial.
@ted: great tip on the “inset”. Was working my mind through the reason for the strange micro-border!
In scenarios like below I get pixelation in Safari, IE and some yet less in FF. Is anyone else getting this ?
.point_bottom {
border-left: 200px solid transparent;
border-right: 200px solid transparent;
border-top: 80px solid #FF0000;
bottom: 0;
height: 0;
left: -101px;
position: absolute;
width: 0;
}
If the triangle is not symmetrical, it won’t look smooth. Basically, it’s like trying to draw a straight line at a 30-degree angle in a bitmap image. The line will always look a little jagged.
This trick is just an exploitation of CSS behavior–I don’t believe CSS was intended to do this sort of thing. If you want truly straight lines at whatever angle, you might want to explore SVG.
This worked for me to smooth things out: http://stackoverflow.com/a/9945375
Now how about a nice way to add a drop shadow to the triangle? Would be so awesome…
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.
Is it possible to use this on a [submit] button?
so the end result would look like this https://skitch.com/iestynx/fa6et/artwork
I’m a bit new to this so sorry if it’s a stupid question.
Thanks
Lestyn,
I guess the button can’t be achieved using a div.I tried creating the same using two div and i got the same.
Here’s my Try
http://jsfiddle.net/smkarthick/vb5Tv/3/
The problem that some people have been reporting with inaccurate edges is to do with antialiasing and the fact that
transparent
is equivalent torgba(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 supportrgba()
values (IE8 and earlier), then specify it astransparent
and add aborder-left/right/top/bottom-color
value after it with the correctrgba
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.
The transform trick works a treat in webkit!
Unfortunately for me it introduces issues in Firefox. There’s now a vertical split down the middle of the triangle whenever I scale it up or down…
http://jsfiddle.net/bensmithett/fEjJ3/
Hi,
Triangle design problem in ie9
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?
Gotten a little further using gradient buttons:
http://heavy-construction.us/test3.html
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.
Hey Jeff can you please share the video link? I also saw that video but just lost the link.
Well, I got it working using a yellow flag instead of an outline edge:
http://heavy-construction.us
Thanks the tutorial! I used this with em sizing to make it work dynamically – check it out!
http://thinkcloud.ly/snippets/tooltips.html
An interesting thing I am noticing in Chrome is that when all arrows are set to the same size, the .arrow-right is 2px taller than the other arrows .
how do you get the text to line up next to the arrow? Thanks!
line-height: 0
will vertically center the text, and you should apply a padding so the text doesn’t bleed over the arrow.This is brilliant! Thanks
div{
height: 0px;
width: 0px;
}
div.left-arrow {
border: 20px solid #fff;
border-right: 20px solid #abc;
border-left:none;
}
div.right-arrow {
border: 20px solid #fff;
border-left: 20px solid #abc;
}
div.down-arrow {
border: 20px solid #fff;
border-top: 20px solid #abc;
border-bottom:none;
}
div.up-arrow {
border: 20px solid #fff;
border-bottom: 20px solid #abc;
border-top:none;
}
from: http://kougiland.com/css-triangle.html
Hey guys! I just made a simple generator:
http://apps.eky.hk/css-triangle-generator
Thanks a lot! Great generator!
I used it some weeks ago before knowing it was yours, and it was very useful.
Awesome work, congrats!
Great job on the generator!!
Very nice work on the generator!
Thanks for a great tutorial!
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?How to give auto width ? its taking width of its parent div. I tried all types e.g auto… Is there another trick?
Dude, the buggy Fire Fox is putting a gray border :( didn’t working even using before and after
Tried with white color!
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid #FFF;
}
See Ted’s comment above re: inset borders
That should fix you right up.
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
if you want to improve how the triangles get rendered on chrome/safari add
-webkit-transform:rotate(360deg);
Thanks, this is exactly what I was looking for, works great.
One minor bug I wanted to mention: in the css example it doesn’t list “display: block” as a required def – in the demo this is inherited, but without the proper display setting the arrow gets cut off.
I would recommend adding “display: block” to the css example.
would you like to see http://www.ardianta.tk/2012/04/css3-membuat-segitiga-atau-triangle.html
The arrows on your site are not CSS triangular but image. Did you mean that you want to replace these graphic triangular with CSS triangular?
Yess,, it so Cool.. i can make triangle.. what ever i want..
Cool and easy! I wonder how to add an arroy to a window which has a border color black and background white and you want your arrow follows same background and border. Like google+
really like this trick!
unfortunately, your facebook recommend button doesn’t work mate.
any particular reason for setting overflow:hidden in “.end-of-article-stuff “?
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):
http://www.1001cocktails.com/
Thanks,
Justme
CSS Arrows! (overlapping triangles)
.arrow-right {
width:0px;
height:0px;
border-bottom:9px solid transparent;
border-top:9px solid transparent;
border-left:9px solid #2f2f2f;
font-size:0px;
line-height:0px;
position: absolute;
z-index: 1;
top: 0;
left: 0;
overflow:auto;
}
.smaller-arrow-right {
width:0px;
height:0px;
border-bottom:4px solid transparent;
border-top:4px solid transparent;
border-left:4px solid #fff;
font-size:0px;
line-height:0px;
position: absolute;
z-index: 2;
top: 5px;
left: 0;
}
check this page. Add borders to our arrow. http://cssarrowplease.com/
I totally consent with your ideas. We all obtain a benefit from this fantastic posting. This website is excellent. I have discovered a great deal of things from here. Many thanks.
Cool, thanks for the tips! I used this method instead of images for my new website, http://www.doodlingpandas.com .
The above comment from
wendee
12/16/2011
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.
Anyone have more insight? It appears to me to be a bug in chrome.
Don
Awesome, Chris! This definitely beats a cumbersome SVG tag.
Arrow with Border:
CSS:
HTML Snippet:
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.
Please help! Thanks in advance! :)
-Angela
Was giving that here a try locally and it looks great
The issue I have is that I have a span inside the container (which is an h3) and I guess because of the width being 0 I can’t manage to get the text to appear inside the triangle look :
Cheers,
Amit
Is it possible to give shadow to the arrows?
No because there is no height and width. it is only border trick. If you want shadow create photoshop PNG
Hi,
Playing around with this technique and wondering if anybody can help.. see this jsbin:
http://jsbin.com/uviyat/2/edit
Notice ‘Longer Wording Example’ – how can I get the triangle to scale vertically to dynamically fill the selected blue area height ? (the triangle in generated in the last css rule)..
I’m stumped! Anybody got any ideas?
Thanks in advance
Very nice trick and exactly what I was looking for.
I used a non isosceles triangle which works great with the rotate-webkit-fix from Dan.
In IE8 it looks a bit crappy but I can live with this.
Thank you so much and keep up the good work.
Anyone know of a fix for IE8’s jagged rendering? -ms-transform: rotate(360deg); doesn’t seem to play nice with IE8.
Hi there!
I like that solution!
Unfortunately I have to do an arrow with border… Has anyone a nice solution for me? :/
Thank you! ^^
Hey Mate.
Thanks to @Matts link, I was able to put something together : )
Its very basic, but gets the job done.
It works best in Mozilla Firefox.
/* begin css */
body
{
margin-top: 100px;
}
.container
{
width:100%;
}
.trifront
{
position:absolute; right:5px; top:-195px;
width: 0;
height: 0;
border-top: 195px solid transparent;
border-bottom: 195px solid transparent;
border-left: 195px solid #FFFF66;
}
.triback
{
position:absolute; left:64%;
width: 0;
height: 0;
border-top: 205px solid transparent;
border-bottom: 205px solid transparent;
border-left: 205px solid #000000;
z-index:-1;
}
.rectangle
{
position:absolute; top: 28%; left:1%; width:63%; height:14%; background-color:#FFFF66;
text-align:center; border-style:solid; border-width: 5px;border-right:0px;
}
/* end css */
Just add a reference to the css in your HTML code, and apply div tags accordingly.
I hope I have been of some assistance, or at least got you on the right track!!
Good luck mate!
Let me know what what you think : )
HoofedCracker
Hey mate!
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)
HoofedCracker
@M
@HoofedCracker
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:
http://jsbin.com/oturaf/1/edit
Choice!
That sounds very promising!
Trying to wrap my head around it.
Do you believe it’d be possible to implement that to a complete triangle shape , rather than a box with a triangle pointer?
i.e. (The original Triangle; as illustrated above)
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
Very curious to how this would look : )
Cheers,
HoofedCracker
Hi.. Nice explanation. I have wrote something similar about [how to create CSS triangle](http://webdesigninspirationtoday.com/article/133/how-to-create-css-triangle-caret/). There I explained the basic theory using CSS border to give everyone better understanding, how the CSS triangle produced.
Chris,
Below is a question on StackOverflow that touches on this topic and provides a robust example of a good real-world use case:
http://stackoverflow.com/questions/12499673/css-items-with-border-radius-and-triangle-side
I don’t seem to get where to place the code in blogger template, please help
Hello,
Is it possible to have drop shadow in triangle?
i tried to use box shadow and the effect goes around the box and not the triangle .
thx in advance.
I’m curious about this as well!
This will tell you how!
I know about this tut but its not what i want.
take a look at this that i made. i hope you like it :D
http://jsfiddle.net/adoumas/tNXdp/
No need to use four DIVs to create a triangle with CSS.
Based on 40a‘s and Web Design Inspiration Today‘s examples above, I created this CodePen demo with several other options for ‘rotating’ the triangle: http://codepen.io/rzea/pen/feiLs
I thought this was pretty cool, and I was surprised no one posted it already!
Nice. Works like a charme :-)
I thought this was cool as well, refactored a bit from my other post.
LESS:
Outputs this:
CSS:
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.
Try pasting this in JSFiddle and see for yourself :)
The HTML :
The CSS:
could anyone please tell me how do i give the triangles a thick black border.
Thanks Ted; you’re technique is perfectly remove stroke from firefox.
Thanks all. Me too have a basic tool at http://www.careerbless.com/services/css/csstooltipcreator.php – Can be used in line with the techniques u suggested. Please share your thoughts on the same.
This Isn’t Works In IE 8.
Means: Accurate Arrow Point Doesn’t comes up in IE 8 With Same Code.
Thanks God I’ve found it :
Just Add
in your css to make it work in IE 8.
Here is all Code :
This One is Also Useful !
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 :)
nice trick :)
Great tip!
Wondering if there is a way to duplicate the arrow in a straight row for as long as the browsers width is?
Here I have a better development in Less (CSS) to do that sort of thing
https://gist.github.com/alejonext/5131863
this is arrow is nice. do you have any tutorial making games using javascript ? thanks :)
Its also worth nothing how to add a triangle/arrow to a element without any extra mark-up.
.add-on { position: relative {
.add-on:after {
border-bottom: 4px solid transparent;
border-left: 4px solid #EDEDED;
border-top: 4px solid transparent;
content: " ";
height: 0;
left: 0;
margin-top: -4px;
position: absolute;
top: 50%;
width: 0;
}
I can’t seem to find a solution to my problem, I wanted to have a dynamic height triangle for my responsive divs.
Resizing triangles that might help get you started :: http://codepen.io/Matnard/pen/wBDre
SVG might be good too:
And this is a great CSS-only dynamic height arrow:
https://gist.github.com/056dc67bf31342cc6bd7
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.
Is it possible to add rounded corners to the triangle?
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
<
div>
Thank you for this! The only problem comes when you want to put a border on the triangle.
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.
just simply to say thanks!
Excellent post, many thanks for sharing.
This has saved me from using transform: rotateZ(45deg); which didn’t work particularly well on iOS 6 / Safari.
Nice one. Yet a problem. Is there a way to apply** border for the border**?
Hope you can understand what I am trying to acheive.
You can use two triangles, one big and one small and then align them using CSS as described here
i want arrow with a 1 px of border around it , is it possible?
plz Help.
Hello, i need border also for triangle. Here my codes.
http://jsfiddle.net/e62b3/
Thanks to share, I’ve used it here Dropdown menu with CSS and jQuery including CSS arrows.
can we make write able triangle I cant write in the triangle when i write it
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:
Last one was using two divs. For a one-div responsive up-pointing triangle 100% width using a pseudo-element:
For the full explanation on how to change the triangle proportions and down, left and right pointing triangle snippets see Pure CSS responsive triangles. This CSS assumes box-sizing:content-box.
Created this small visualization to explain how do borders turn into triangles : http://codepen.io/Tresva/pen/dxHsb. This may help to understand quicker.
For more on css3, can check below URL:
http://www.uiplayground.in/css3-icons/
Believe me or not, I’m in a situation that nothing can help but a CSS triangle :)
Thanks for the tutorial
Firefox gray diagonal lines on the mac issue.
Resolved: rather then ‘transparent’ use rgba(255,255,255,0)
[rgba(0,0,0,0) renders the same as transparent]
After reading this article (thanks for the helpful info Chris!), I stumbled across this CSS Triangle Generator. It’s pretty awesome
Heres my little mixin I use in order to get arrows!
thanks
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?
Thanks!
Thanks! I was using an html entity for an arrow in an html email template, but it wasn’t displaying properly on iOS. The CSS triangle solved it!
Not at all necessary to rotate the triangles as they are hard to align. E.g. this triangle is sittin on one of its sides:
border-left:30px solid transparent;
border-bottom:25px solid #B7550C;>
Just putting this out there, if the lines look like crap in Firefox etc. Use ‘dashed’ instead of ‘solid’ on the transparent borders. :)
Thanks a lot for this Shaun, it looks really better this way indeed.
Well done :)
For the first time I knew about this ..
Very useful once, and of course the function all of assets can be reduced slightly with the help of CSS 3..
Thx alot..
Created a Gist for a SASS Version to be used as a mixin. Enjoy!
https://gist.github.com/willbowling/10181744#file-_sass-arrows-sass
Anyone can help me to make that triangle is on :before or :after for the div?
plus some positioning. works perfectly.
There is an article in the March 2013 (Vol. 56 No. 3) Communications of the ACM, The Story of the Teapot in DHTML, by Brian Beckman and Erik Meij, that explains how you can use CSS borders to render any arbitrary image. If you don’t have access to CACM, there is a wiki at http://www.sjbaker.org/wiki/index.php?title=The_History_of_The_Teapot.
Note: The
BACKGROUND
needs to beTRANSPARENT
/NONE
Explanation: 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 :)
Whats the Best way to get a background image in that triangle?
what if I want to create an arrow with html css only (not a traingle with filled background color or border color) .. pls give any suggestions
1) use a font arrow e.g. → (
&#8592
) , you can google “ascii arrows” for more2) 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 :)Hope this helps :)
Very Nice. But can we make bullets for list with this like code?
this is damn cool. i’m impressed.
Excellent explanation, It was simple and easy to mess with to achieve the results I wanted
Thanks for the nice tutorial
My little advice…
If you make an up triangle. Declaring lateral border to “inset” seems the triangle renders better… In firefox there is a big difference..
Bests!
More css shapes:-
http://findnerd.com/list/view/Create-shapes-using-css/1311/
Thanks for that link
How to create a css this kind of arrow but add a border?
Here’s a pen with a few more arrows:
This. Totally this.
Thank you for putting this pen together.
@Chris, thank you for the article. It may be old, but it helped.
You are very welcome Lisa.
I want to create something like this(see the adjoining image) in CSS and then bootstrap it … can anyone help me??
http://imgur.com/hAQU4bb …. Please help me as soon as possible
nice, thx a lot
In the css example blue arrow is shown before green but in css code it’s reversed. Can you please make it occur in same order, to avoid any confusion.
This is awesome!! What a great idea!
its very simple, and nice working.
i like it..
I just want to know how to put shadow on that triangle. Thanks.
as simple as awesome
hep böyle böyle kandırıyosunuz insanları ayıptır be olm yapmayın şöyle şeyler :)
u cheating people with theese tricks.. don’t do it. use something else like big sized png images. :)
I need a triangle with a size made using % for a responsive web. How i can do that?
GOOGLE
This is what I’ve done :D
See the Pen Arrow with border properties by Aditya Narayan (@adinar97) on CodePen.
Thanksssssssssssss…
is there any possible, to apply gradient colors,for arrow-down class.
Very useful article. I was able to use the css triangle methods for a side project and wanted to share in case it was useful for anyone else.
http://www.appliedcss.com/target-component/
I build a CSS Triangle generator (http://triangle.designyourcode.io) this may help a few people create and colour triangles easier.
It outputs the code for both a normal element and using it on a pseudo selector. I am also working on updating it with a SCSS mixin, but that isn’t available yet.
I don’t have safari browser, but I’m wondering, do you know if backdrop-filter will work on triangles/borders if we make them translucent?
Cheers,
Bob.
arrow button tab code
Really impresssed by this! So simple and functional!
Wow …. I wish there was a button for like or commend, or give a medal.
Awesome!
Never knew that the border property can be used for this!
Thanks a lot, Chris!!!
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,
History Day is on April 21.
To Michael F. (April 21).
You just have to put a float (left ou right) in your html, and it’s ok.
Thank you very much for this. Very simple, straightforward and easily applicable.
How do you put text in the triangle because when i add text it goes outside the triangle.
Hi,
Thank you for this post. Is ti possible to put a triangle inside a element of a table to show that it is sorted ascending or descending order?
That was the most succinct explanation for creating these triangles I have come across and this is gonna stick. Thanks a lot!
This is all cool and stuff, but what if I want to give a border to an upward facing triangle but have it only show the two sides of the border and have the hypotenuse of the triangle not visible
Been programming for decades… thanks to you I finally got the triangle. Thanks!
Interesting what I found: change
<div>
to<span>
or<i>
and a nasty distortion applies! Still wonder why :/How about browser compatibility? Some browsers square edges of border vs bevel. At least that used to be the case at one time.
Thank you it really helps me to understand this css trick !
Thanks a lot! This tutorial was great!
what is the size of the unspecified border size? cannot find a rule say it default to 0