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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $14.00 
RoyalSlider – Touch-Enable ... only $12.00 
Kult House - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
This is just unsemantic, ugly code! How can you recommend people to use this? THIS IS NOT GOOD CODING!
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!
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?
You explain to me how not using and index file on your website is a smart idea! ;)
excuse me?
rel=”stylesheet” href=”style.php” @ your own site?
Is that some kind of elite way to throw us designers off track? Or is it just symantic, beautiful code, in your humble opinion?
dude, ur own website code are so terrible
nice
Great post.
This looks very simple and easy.
Thanks.
this is awesome man great!! stuff
the Homer was also nice …
http://www.romancortes.com/blog/homer-css/
Hey very nice………Got new thing to learn :) cheers !
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?
My bad, found one little colon that looked like a semicolon, lol.
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
I have a hard time with these myself, this tutorial will prove useful in the future.
<= Why don’t use it for your own comments ??? :p
Thanks
So thats how you do it!!! Been looking for something like that for a very long time.
Excellent tutorial! It’s going to be very useful for my current project. Thank you ;)
no need for go for an image
a very useful tutorial thanks should come in handy
Thanks ;D
A very useful tutorial, thankyou very much!
very nice bro.. i learn a lot to your tutorial. God Bless You bro
You can position the shape in the corner of the container element and make it look like the box is folded on the corner.
woow… realy good
excellant tut
Very interested in the last part, about the tags on the validator, never knew that.
Brilliant tut as usual!
Looks Very Cool!!!
Strange but very cool!
Some excellent CSS resouce info here. Keep up the good work.
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?
Hm … apparantly I can’t write this “<” here.
I meant:
Which tag to use instead of “span” to make it validate?
Simply amazing.
hello there !! i just dicovered this site and i found it very helpful, will be coming back to it in the future
Jeff – You just make thigs eeeeeeasy. I saw sam tutorial for this arrow stuff, but people get too comlicated. You’re The Shit! ;) thanks
why use a color for the invisible borders? _px solid transparent works well, so does none, and 0;
I was hoping to see some more examples. May be if you could create some more and show us mortals some tricks ;)
Awesome Tut.
First example dont work in FF 3.6 without JS.
Way to go to call it “100% CSS”.
Excellent, thanks for this, i’ll be using this on my vbulletin 4 styles website, i will leave full credits to your site so my visitors can learn this also, Thanks
Wonderful post :0
Very interesting!! I was experimenting with this kinda thing and managed to reproduce the mushroom from Mario Brothers.
http://www.rob-allison.co.uk/fun-with-css-rounded-corners/
ya mushr00m rock man…
hi i’m shiela thanks for the tutorial i wish you will make a video and post it into youtube
I always use an image, I never thought it, thanks
Whoever says whatever, Jeffrey Way you rock in every way.
:-)
Olá! Bom dia!
Estou acompanhando teus tutoriais aqui do Brasil e estou gostando muito! Estão servindo muito para o meu aprendizado.
Obrigado.
Hi, Morning there!
I am following your tutorials from Brazil and like so much! They are serving for my learning, a lot!
Thanks anyway.
thank you? Very useful!
Very detailed article would it be OK if i translate into French for my sites subscribers? Thanks
the Homer was also nice …
Thanks for the great post
I’ve got to admit … I didn’t know that this was possible before seeing this tut …
Awesome share
=)
If #e3e3e3 looks “blue” to you, you need to check your monitor/display settings. #e3e3e3 is grey.
I used this to clear breadcrumb nav. I need to change this shape’s color on hover, but can’t do.
See my CSS
.orgSubMenu li a span{border-style:solid; border-color:transparent transparent transparent #818181; border-width:4px 5px; width:0; height:0; float:left; margin:4px 0 0;}
.searchPage .orgSubMenu li a:hover span, .searchPage .orgSubMenu li a:focus span {
border-color: transparent transparent transparent #4A751C !important;
}
Sorry, I was to say ‘create’ instead of ‘clear’ on the comment above.
Checkout demo of my problem here: http://jsfiddle.net/ty3GF/4/embedded/result/
Plz reply soon Jeffrey.
Great stuff, thanks