I’ve come across a few techniques and tips in my career, while working at my last gig a co-worker pointed me to this technique. I believe this was originally discovered by the legendary Eric Meyer, but I couldn’t find much documentation about it on the web so I thought I would describe it here.
Demo
How it works
Few people realize when a browser draws the borders, it draws them at angles. This technique takes advantage of that. One side of the border is colored for the color of the arrow, and the rest are transparent. Then you set the width of the border to something large, the ones above are 20px. To demonstrate here is a div with all sides colored.
<div class="css-arrow-multicolor"></div>
.css-arrow-multicolor {
border-color: red green blue orange;
border-style:solid;
border-width:20px;
width:0;
height:0;
}As you can see there are triangles hidden in that square. These triangles are right triangles with a little tweaking with the border sizes you can get acute triangles.
.css-arrow-acute {
border-color: red green blue orange;
border-style:solid;
border-width:25px 10px 15px 30px;
width:0;
height:0;
}With a little creativity and tweaking there are lots of shapes that can be made.
border-style:dotted;
border-style:dashed;
border-style:outset;
border-style:inset;
border-style:ridge;
border-style:groove;
border-style:double;
Now for application:
This is a classic chat bubble, no images used.
<div class="chat-bubble">
Buongiorno!
<div class="chat-bubble-arrow-border"></div>
<div class="chat-bubble-arrow"></div>
</div>
.chat-bubble {
background-color:#EDEDED;
border:2px solid #666666;
font-size:35px;
line-height:1.3em;
margin:10px auto;
padding:10px;
position:relative;
text-align:center;
width:300px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow:0 0 5px #888888;
-webkit-box-shadow:0 0 5px #888888;
}
.chat-bubble-arrow-border {
border-color: #666666 transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-22px;
left:30px;
}
.chat-bubble-arrow {
border-color: #EDEDED transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-19px;
left:30px;
}This technique doesn’t work in ie6 as is, mainly because ie6 doesn’t allow transparent borders, but there is a fix for that. What you need to do is give the “transparent” sides a completely different color like pink and then use filter: chroma to turn that color transparent.
/* IE6 */
.chat-bubble-arrow {
_border-left-color: pink;
_border-bottom-color: pink;
_border-right-color: pink;
_filter: chroma(color=pink);
}
If you enjoyed reading this post, check out these posts CSS Clear Fixes, Web Development Bookmarklets, Targeting IE6 for style.
Wow. I’ve never thought about doing this with CSS! This could be used in so many awesome ways.
fantastic!!!!! how nifty! :O
Awesome! As a css novice, I am amazed!
Thanks for posting this technique.
Just noticed that RSS sign below post is also made by CSS =)
[...] This post was Twitted by crayulaglonon [...]
[...] This post was Twitted by DbyD [...]
Neat trick! Thanks for sharing!
[...] están disponibles hoy en día para encontrar nuevas formas de implementar CSS, hoy mientas leía a Jon Rohan encontré una forma realmente ingeniosas de crear globos o bocadillos sin usar absolutamente [...]
So neat, man,
thanks for sharing these tricks,
tweeted !
I’m not a fan of the non-standards-compliant stuff towards the bottom, but the bordered content at the top was nothing short of beautiful. I hope to find a use for it soon.
Cool! =)))
Amazing! Really helpful.
Thank you Jon for sharing.
very very cool
thnx
I could not get it to work in IE6 (the triangle) until I added an image inside the DIV with height and width set to 0. I know, IE6 is the devil, but still have clients using it, along with 12% of the lost souls out there.
Very cool techniques. Thanks
is this cross browser?
Wow, Very cool!
I can’t believe no one thought of this before!
Thanks Jon.
The triangles look great in all the browsers, as for the rounded corners, they only work with Firefox, Safari and Chrome browsers (in IE (6-8) and Opera (9) your method doesn’t work…)
[...] CSS ile Üçgen Oluşturma [...]
Hi Jon, if you use border-style: solid dashed dashed dashed; (or solid dotted dotted dotted) on the arrow then this should work in IE6 without using the filter hack :D You can use this as a reference: (I coded this a little while back – pure css rotating arrow using JS): http://www.joshsalverda.com/sandbox/arrow/ The code is kinda messy but it seems to work… also IE6 sucks at anti-aliasing so the arrow looks pretty fugly… but no images! :)
Very interesting tips… Really simple and easy to implement, thanks for sharing.
-Deepu
Really amazing.
Its very useful.
[...] This post was Twitted by apogeeza [...]
Great work! I love posts like this that give me all kinds of inspirational ideas. Thanks for posting!
super cool!
Wow! I never knew you could do this! Awesome, thanks for sharing!
What about finding a useful application for this wildly fun stuff? Empty divs just to create visuals? They’re beautiful, but — y’know?
Great stuff Jon! I have been using css triangles recently as well. I was turned on to them by Nicole Sullivan (@stubbornella) while geeking out at a conference in Boston.
I had seen something like this before and did some research. I fount this Polygon CSS example by the amazing Tantek Çelik from all the way back in 2001! http://tantek.com/CSS/Examples/polygons.html
I put some of this triangle code to use for all the ‘bubbles’ on the reinvigorate blog: http://blog.reinvigorate.net …I am using jQuery to add the extra non-semantic element that contains the polygon. The only problems I had were with IE6, so thank you for pointing out some potential fixes :)
Cheers!
[...] Jon Rohan · Creating Triangles in CSS (tags: css, tutorial) [...]
Very cool! Css is so versatile, Amazing. thanks for sharing and Happy New Year Jon
[...] However, as browsers draw borders at angles, it is possible to create an illusion which Jon Rohan is sharing in detail. [...]
Thanks for this cool trick!
There is only one thing: if you scale (zoom) the textsize of the page twice or three times the arrow gets seperated by about 1px! Maybe another scale unit like em, % could work.
But your approach is awesome! Keep on!
regards!
[...] Jon Rohan – Creating triangles in CSS – CSS triangles – Link. [...]
[...] This post was Twitted by SyntheticTone [...]
Stu Nicholls CSSplay was the first place I read about making odd shapes with css using this technique, you can really do some cool stuff with it, like these stars: http://www.cssplay.co.uk/menu/fivestar
nice trick, you are king :-)
I am also wondering how could you think that…? I am really impressed.
[...] [...]
Cool tip, I love the lengths you can go to with CSS, so much can be done.
Innovative idea!!!
Helpful article. Thanks
[...] to create useful triangles for building a nice ribbon. Below the CSS code to draw an arrow (read Creating Triangles in CSS to know more about this [...]
Dude, this is fantastic! Never thought this way…
Nice work. I’m definitely using this =D
Jon- this is great stuff. Thanks for sharing!
I found your site via http://www.pvmgarage.com/en/2010/01/how-to-create-depth-and-nice-3d-ribbons-only-using-css3/ via http://www.smashingmagazine.com/2010/01/12/45-powerful-css-javascript-techniques/
Keep it up :)
css can be great if you know how to use it.
Great .. didn’t thought of making this in CSS yet. actually didnt knew to do this before. Thanx for sharing
Great post, being able to draw triangles opens up so many doors….
Quick tip on using this with IE6: if you’re using small inline triangles and are getting trapezoids in IE6 (e.g. the triangle looks to be stretched tall but is cut off horizontally) — just set
line-height: 0;on whatever has the borders.And of course use the filter trick described in the post above…
[...] something like this must have been discovered before by others. Sure enough, developer Jon Rohan beat me to it. I still feel cool I stumbled on the trick [...]
Wow awesome, css is so powerfull and you show us this :)
thank you
Hey actually in IE6 if you attach
line-height: 0; font-size: 0;in addition to the filter trick above, it will fix any odd shaped triangles (sometimes the left and right triangles will get too ‘tall’ otherwise and form a trapezoid)[...] Link: Css Triangles [...]
Amazing discovery you made there!
I would have never guessed that you can achieve something like this with css only!
Thanks for sharing
Very interesting technique, never thought that will work.
[...] to create useful triangles for building a nice ribbon. Below the CSS code to draw an arrow (read Creating Triangles in CSS to know more about this [...]
brilliant idea. thanks
[...] disegnare triangoli utilizzando i CSS (per saperne di più su questa tecnica è opportuno leggere Creating Triangles in CSS su [...]
I knew about CSS borders being triangle, I just never thought of using that to my advantage. Never needed to do arrows but when I do.. Would be awesome! Thanks a bunch, great article!
[...] Creating Triangles in CSS Few people realize that a browser draws borders at angles. This technique takes advantage of that. One side of the border is given the color of the arrow, and the rest are transparent. Then you give the border a large width; the ones above are 20 pixels. [...]
This technique works in IE6 too if u replace the border-style for those sides that are transparent to dotted.
so instead of:
border-color: #EDEDED transparent transparent transparent;
border-style: solid;
use:
border-color: #EDEDED transparent transparent transparent;
border-style: solid dotted dotted;
[...] February 18, 2010 Michael Dozark Leave a comment Go to comments I was giddy when I saw this post about creating CSS triangles on Jon Rohan’s blog and quickly realized two [...]
[...] Creating Triangles in CSS Few people realize that a browser draws borders at angles. This technique takes advantage of that. One side of the border is given the color of the arrow, and the rest are transparent. Then you give the border a large width; the ones above are 20 pixels. [...]
[...] Creating Triangles in CSS Few people realize that a browser draws borders at angles. This technique takes advantage of that. One side of the border is given the color of the arrow, and the rest are transparent. Then you give the border a large width; the ones above are 20 pixels. [...]
[...] Creating Triangles in CSS Few people realize that a browser draws borders at angles. This technique takes advantage of that. One side of the border is given the color of the arrow, and the rest are transparent. Then you give the border a large width; the ones above are 20 pixels. [...]
[...] Creating Triangles in CSS Few people realize that a browser draws borders at angles. This technique takes advantage of that. One side of the border is given the color of the arrow, and the rest are transparent. Then you give the border a large width; the ones above are 20 pixels. [...]
[...] Creating Triangles in CSS Few people realize that a browser draws borders at angles. This technique takes advantage of that. One side of the border is given the color of the arrow, and the rest are transparent. Then you give the border a large width; the ones above are 20 pixels. [...]
[...] First though, here is the link to the specific page on his site, dinnermint.org. [...]
[...] Creating Triangles in CSS Few people realize that a browser draws borders at angles. This technique takes advantage of that. One side of the border is given the color of the arrow, and the rest are transparent. Then you give the border a large width; the ones above are 20 pixels. [...]
CSS nice thanks
Thk a lot for this useful trick :)
I’m not seeing the dotted or dashed in IE7. But regardless, this is an amazing find, and it must have been very satisfying to come across.
wow…. i’ve been looking for something like this… many thanks!!
[...] Creating Triangles in CSS Few people realize that a browser draws borders at angles. This technique takes advantage of that. One side of the border is given the color of the arrow, and the rest are transparent. Then you give the border a large width; the ones above are 20 pixels. [...]
Internet Explorer 7 (IE7) needs for the css-arrow-multicolor -Y line-height: 0 , as well.
Please update your post, so others do not have to lose time trying it
Very nice trick, thanks.
css rules!!
[...] with, and I ended up using them all over jonraasch.com. Combining this with some box-shadow and this CSS triangle trick, I was able to make it so that the only image assets my site loads are its background, logo and [...]
How to make angle like this http://stashbox.org/881002/1104381445-My-Desktop.png
[...] Creating Triangles in CSS by John Rohan – I used this info to make the comment bubble arrows. [...]
Problem with textlinks: Take the chat bubble example: make the arrows bigger, place a textlink after it – then you can’t click the area in the text where the arrows extend into. Any idea how to solve this?