I bet a bunch of you don't realize that we can create the illusion of shapes by using 100% CSS. By utilizing the border property in creative ways, we can make some really interesting polygons. In this week's screencast, we'll figure out a way to create speech-bubbles without resorting to background images.
Most of us, by now, are familiar with using the "-moz-border-radius" and "-webkit-border-radius" properties to create rounded corners - or even complete circles - but there are other techniques to create more complicated shapes.
Traditional Speech-Bubble
blockquote#one {
width: 250px;
background: #e3e3e3;
padding: 25px;
position: relative;
}
#one .arrow {
width: 0;
height: 0;
line-height: 0;
border-top: 30px solid #e3e3e3;
border-left: 60px solid white;
border-right: 10px solid white;
position: absolute;
bottom: -30px;
right: 30px;
}
Note how the "bottom" property is the reciprocal of the "border-top" property.
Alternate
blockquote#two {
width: 250px;
background: #e3e3e3;
padding: 25px;
position: relative;
}
blockquote#two .arrow {
width: 0;
height: 0;
line-height: 0;
border-top: 40px solid #e3e3e3;
border-left: none;
border-right: 30px solid white;
position: absolute;
bottom: 60%;
right: -30px;
}
Yet Another
blockquote#three {
width: 450px;
background: #e3e3e3;
padding: 25px;
position: relative;
}
#three .arrow {
width: 0;
height: 0;
line-height: 0;
border-bottom: 25px solid #e3e3e3;
border-right: 50px solid white;
position: absolute;
top: -24px;
left: 20px;
}
Interesting Note
I'm typing this paragraph minutes before posting the tutorial. I learned something tonight. Did you know that, if you want your document to validate, you can't place text directly into a blockquote? It needs to be nested within a parent element - like the <p> tag. Additionally, the validator didn't like the fact that I used a span tag within the blockquote. It allows for a plethora of elements, but unfortunately not the span! Oh well; no big deal. Just replace it with a different element. It hardly makes a difference.
Pretty Nifty
I'm really eager to see how you guys have implemented this unique trick into your own projects. Send us links to your examples, via the comments. Thanks for watching. Next week, plan on learning something much more advanced. ...I just need to figure out what! Until then.
- Follow us on Twitter, or subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Will April 2nd
hmm, a lot easier than the way i was doing it! Thanks a lot, Jeffrey. This is a simple, but well-written tutorial that even the best of us can benefit from.
( )Roosevelt P. April 2nd
Super! Very useful technique bro
. I actually skipped around and got into the good stuff XD.
Thanks.
( )Jeffrey Way April 2nd
Hey everyone. Sorry for the “bottombottom” and “rightright” issues in the source code. It’s an issue with the plugin. I can’t change that.
( )lawrence77 April 2nd
Your New Avatar is Good!
I love ur screencast series, caz its more clear than these Texts…..
I’m a newbie to CSS too, so its helpful
( )thanks JW
Sirwan April 3rd
i like your new avatar
( )rrr April 5th
хы
Rene April 2nd
Hey great tutorial, this surely comes in handy and saves a lot of time!
( )Vasili April 2nd
Woah, you finally use your Mac! Once you showed the #trap example, I knew exactly what to use it with, comments. A tornado warning, and you’re making a screencast? You crazy man.
Just wondering, is that the built in mic or one you bought and hooked up?
( )Jeffrey Way April 2nd
@Vasili – It’s a Snowball condenser.
( )Nouman Saleem April 2nd
Hey Jeff,
is the demo linked correctly? I haven’t seen the video, so this may be premature, but it is supposed to be a flickr gallery?
thanks,
( )Nouman
Jeffrey Way April 2nd
Whoops. Thought I fixed that! The site has been updated.
( )Nouman Saleem April 2nd
thank a lot Jeff, looks sweet
Mike T. April 2nd
Hmm….these techniques look a little familiar, *cough* *cough*:
http://www.filamentgroup.com/lab/image_free_css_tooltip_pointers_a_use_for_polygonal_css/
( )Jarod April 3rd
Well, it’s a good thing Jeffrey created a tutorial on it, cause I don’t subscribe to filamentgroup.com and would have not seen this technique, huh?
( )Jeffrey Way April 3rd
I never stated that this technique was my discovery. There are many sites that teach this method.
( )ec April 4th
of course… another great one:
CSS Play
by Stu Nichols
Then there’s always Eric Meyers, whom I think you once interviewed or something on one of the TUTS sites, if not this one!
ec April 4th
woops
Here’s the link
CSS Play
by Stu Nichols
dev.My April 2nd
Really good tutorial, love this
( )Huy Dũng April 2nd
Interesting.
I’ve just finished a html template yesterday (http://ftk.vn/templatenew/index.html). The content area and sidebar use this technique heavily.
Personally, I thought this technique is just for fun and not useful in practical, until I got the requirement that the design of ftk.vn must identical to fastrackids.com, and found that this technique has a room for it.
And today you’ve showed me an unique way to use it extensively. Thanks for the tut.
( )Meshach April 2nd
Jeffrey, you’ve done it again!!! WOOHOO!
I love the new avatar BTW.
( )insic April 2nd
nice tut Jeff.
( )sammu April 29th
yea nice
( )Jeremy Worboys April 2nd
Thanks, this gave me a cool idea for a jquery drop-down nav.
I think I’ll have a play and post the results if I get something working nicely.
( )Hector April 2nd
Damn! How I love your tutorials! :S
( )I’m from Argentina, and I always visit you.
I learn so much!!
Thanks!!
Rahul Chowdhury April 2nd
Awesome Tutorial, really helpful. I will give it a go!
( )Lamin Barrow April 2nd
I have thought of writing a tutorial like this a long time ago.. but hey good to see stuff like this.
( )Jordy April 2nd
Thanks
( )chris April 2nd
Nice little tut! Thx
( )crysfel April 3rd
i didn’t know this! thanks dude!
( )Shaun Butler April 3rd
Man, Thats smokin!
( )Vincent D'Amico April 3rd
clever
( )Teddy Zetterlund April 3rd
This is how I did it about a month ago when I played around with it for a administration theme: http://gist.github.com/74865
As you can see I didn’t perfect the technique for IE6 (since IE6 wouldn’t be used by the administrators I didn’t matter). But now, thanks to you, I don’t have to figure out it out by myself since I noticed your “line-height” usage above.
Nice one.
( )Shane April 3rd
Good stuff. Thanks for posting.
( )Snorri - Css April 3rd
hum…. interesting
( )Jeff Hui April 3rd
Very nice tutorial
I was just wondering, is there any problems for setting those white border colors to transparent?
As a side note, span isn’t a valid self-closing tag. It might mess up some browser’s DOM trees.
http://stackoverflow.com/questions/97522/what-are-all-the-valid-self-closing-tags-in-xhtml-as-implemented-by-the-major-b
( )Jeffrey Way April 3rd
Yeah – I wrote about that at the end of the article. Interesting tip.
( )Live Green April 3rd
I have been looking for an easy way around this, and this is it. Thanks for the very useful post and I hope they keep coming still!
( )Little April 3rd
nice job.
( )Teddy Zetterlund April 3rd
Jeff Hui: Only in Internet Exporer 6. I went with transparent borders in the solution I mentioned a few posts ago. Then just a fix for IE6 if you want it.
( )bruno April 3rd
Great tutorial.
( )I would like to see more css tutorials.
Patrick April 3rd
Hey Jeff!
( )Great tut as usual.
transparent border color works well with texture background:
http://patrickburke.de/css_shapes
Just wanted to mention that
rap April 3rd
very nice! it can be used..
<– here
thanks for the tut
( )Martyn April 3rd
Never realised that was possible, I always used images and set it up just like your site. Great tutorial though.
( )cris April 3rd
Am I the only one who can’t see what he is doing because the colors are too light in the video? You are pointing out changes you are making, and I am seeing nothing. If you had used a darker color for the bubble, or whatever you are doing, it would help a bunch.
( )Jason April 3rd
Nice tutorial Jeff! You can also add border-radius to round off those corners and make them look like real speech “bubbles”. Doesn’t work in IE, but…
blockquote#two {
( )border:none;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
border-radius:8px;
}
Marc April 3rd
Yeah, you can if you want a CSS file that doesn’t validate.
( )Chris Raymond April 3rd
This is great but I still can’t get my head around how these proiperties lead to an angled edge of the arrow…can anyone enlighten me?
( )James April 3rd
Hi Chris, this technique is actually quite old – it was coined “border slants” or “border art” a long time ago (possibly by Eric Meyer): The basic concept exploits the fact that at the point where two css borders meet each other, there is diagonal line (you’ll obviously need to use two different coloured borders to see that diagonal line). If the borders are of equal width, that diagonal line will be at 45 degrees. Different border widths will give different angles… Full explanation: http://www.infimum.dk/HTML/slantinfo.html
Mix that together with some positional black-magic and you can create entire shapes: See Tantek’s page here – http://www.tantek.com/CSS/Examples/polygons.html – no images anywhere there!
( )Randy April 3rd
I played around a bit with all these and did you happen to notice when you use the various border styles, really cool things happen!
For instance, changing the first bubble to this:
border-top: 30px dotted #e3e3e3; /* added dotted */
border-left: 60px solid white; /* changed nothing */
border-right: 0px solid white; /* or remove this */
Creates a perfect rounded effect on the right of the arrow! (at least in firefox)
Thanks so much for this tut Jeff! Though, now I’ll be playing around with this all day and get nothing done!
( )James April 3rd
Using a similar logic you can also create giant CSS coloured circles – even in IE, just by using an enormously wide dotted border. I’ve still never found a practical use for that one though!
( )Michelle April 3rd
This was a great tutorial back in December when SitePoint did it: http://www.sitepoint.com/article/css-angles-the-edge-you-need/
But, still holds up well.
( )Stephen April 3rd
I keep thinking how cool it would be to animate these things. With jQuery (or jQuery UI?), it would be fairly simple to animate the border widths, which would then change the angle of the arrow. With a bit of trig, you could probably figure out how to always have the arrow pointed at the middle of your element, or at the mouse pointer…
( )James April 3rd
Damn CSS! Why do you still teach me new tricks?!
( )Diego SA April 3rd
Cool! I’ll use it in future wordpress layouts!
( )|Walter| April 3rd
btw source code is the same as demo!
for better download 
( )plz try to pack it
|W|
|Walter| April 3rd
http://net.tutsplus.com/videos/screencasts/slice-and-dice-that-psd/
my first seen tut and after seen that i love whole net tuts site
btw. Jeffrey you ROCKS and the Jeffrey/Joefrey is really cool tut and nice one for me as beginer in pds to css (XHTML) design.
|W|
( )CarlosB April 3rd
Nice turorial!
( )Bryan Kwon April 3rd
never thought about this, it is amazing!!
( )Chesham April 4th
Wow, totally awesome. I’ll have to start using this.
( )Nykeri April 4th
and we see why i luv css and this site Jeffery my friend ur a boss
( )Adrian 7 April 5th
That’s Cool Man!
( )TheWitcher April 5th
Nice tut Jeff, ya’ve done great job (again!).
( )But one little thing I want to correct: In the Video you said, this technique is not gonna work in front of some kind of textured backgrounds; but that’s not true I think. You just need to give one border the color of the box at which the arrows is sticking to (just as you did it in the tut) and the other one ist not explicit the same color as the background but “transparent” (the span or whatever which is styled as the arrow then has to have background-color:none or transparent.
To me that works fine with textured backgrounds.
Saro April 5th
Exactly what i needed!
( )Anton Agestam April 5th
This is just unsemantic, ugly code! How can you recommend people to use this? THIS IS NOT GOOD CODING!
( )Jeffrey Way April 5th
Care to elaborate? Also, be sure to let me know how using a class of “textcenter” on your own website is a smart idea.
Thanks!
( )Anton Agestam April 6th
What I mean is that it to me seams very “unsemantic” to use an element just to the purpose of styling. Wouldn’t that look pretty nasty, or at least not “as it should look like” if you turn off css style sheets in the web developer tool bar? I’ve always been tought to code semantic and to use the elements to what they are meant to be used to.
The reason I use a textcenter class on page is simply that I often have more than one element in my pages that have centred text. If I can define one less ID, I will keep my css file smaller, will I not?
Anton Agestam April 6th
You explain to me how not using and index file on your website is a smart idea!
(zoe) April 5th
nice
( )Brian April 5th
Great post.
( )This looks very simple and easy.
Thanks.
Gaurav M April 5th
this is awesome man great!! stuff
( )the Homer was also nice …
http://www.romancortes.com/blog/homer-css/
Poonam April 6th
Hey very nice………Got new thing to learn
cheers !
( )Adrian Rodriguez April 6th
Every time I am working on #three .arrow the arrow is not showing up. When I look at it in firefox firebug isn’t showing me border-bottom: 25px solid #e3e3e3;
( )and only shows the border-right style. The weird thing is that I have the style set in my css, but it’s not showing up. Know why this is happening?
Adrian Rodriguez April 6th
My bad, found one little colon that looked like a semicolon, lol.
( )John April 6th
very good stuff, i’ve been looking for a useful way of using this technique for a while… the best I could come up with was my CSS Heart
( )AlfredN April 7th
I have a hard time with these myself, this tutorial will prove useful in the future.
( )romain April 9th
<= Why don’t use it for your own comments ??? :p
( )Abdullah alhourani April 9th
Thanks
( )Shane - Inspiring your Success April 9th
So thats how you do it!!! Been looking for something like that for a very long time.
( )Davor April 9th
Excellent tutorial! It’s going to be very useful for my current project. Thank you
( )omprakash April 10th
no need for go for an image
( )dan April 10th
a very useful tutorial thanks should come in handy
( )Mikael Carrara April 17th
Thanks ;D
( )Erik Groda April 19th
A very useful tutorial, thankyou very much!
( )csseyah April 21st
very nice bro.. i learn a lot to your tutorial. God Bless You bro
( )Terry April 22nd
You can position the shape in the corner of the container element and make it look like the box is folded on the corner.
( )Uğur Özyılmazel April 24th
woow… realy good
( )jake walker April 24th
excellant tut
( )Dean Craig April 25th
Very interested in the last part, about the tags on the validator, never knew that.
Brilliant tut as usual!
( )Bala April 27th
Looks Very Cool!!!
( )Radoslav April 28th
Strange but very cool!
( )Website Design Kent May 2nd
Some excellent CSS resouce info here. Keep up the good work.
( )EDimNETZ May 6th
Thanks for this great tutorial!
Very helpful to a noob like me.
Two questions though:
( )So which tag to take instead of to make the CSS validate?
And how do make it work in IE6?
EDimNETZ May 6th
Hm … apparantly I can’t write this “<” here.
I meant:
( )Which tag to use instead of “span” to make it validate?
Crazyguy Reegan June 27th
Simply amazing.
( )Ali Naqvi July 25th
hello there !! i just dicovered this site and i found it very helpful, will be coming back to it in the future
( )mojitopl August 1st
Jeff – You just make thigs eeeeeeasy. I saw sam tutorial for this arrow stuff, but people get too comlicated. You’re The Shit!
thanks
( )adrusi August 19th
why use a color for the invisible borders? _px solid transparent works well, so does none, and 0;
( )