Quick Tip: Practical CSS Shapes
Tutorial Details
- Topic: CSS
- Difficulty: Intermediate
- Estimated Completion Time: 4 Minutes
A common design technique lately is to create a fold effect, where it appears as if a heading is wrapping behind its container. This is generally achieved through the use of tiny images; however, with CSS, we can mimic this effect quite easily. I’ll show you how in four minutes.
Final HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Shapes</title>
<!--[if IE]>
<style>
.arrow { top: 100%; }
</style>
<![endif]-->
</head>
<body>
<div id="container">
<h1> My Heading <span class="arrow"></span> </h1>
</div>
</body>
</html>
Final CSS
#container {
background: #666;
margin: auto;
width: 500px;
height: 700px;
padding-top: 30px;
font-family: helvetica, arial, sans-serif;
}
h1 {
background: #e3e3e3;
background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8);
background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8));
padding: 10px 20px;
margin-left: -20px;
margin-top: 0;
position: relative;
width: 70%;
-moz-box-shadow: 1px 1px 3px #292929;
-webkit-box-shadow: 1px 1px 3px #292929;
box-shadow: 1px 1px 3px #292929;
color: #454545;
text-shadow: 0 1px 0 white;
}
.arrow {
width: 0; height: 0;
line-height: 0;
border-left: 20px solid transparent;
border-top: 10px solid #c8c8c8;
top: 104%;
left: 0;
position: absolute;
}
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 $16.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 awesome! thanks for the tip!
WOW .. so qick and easy … I like it
Nice effect! How does it degrates in non-css3 brosers?
This isn’t CSS3, so it should display about the same in each browser. IE6 has trouble when using transparency as a border color. But you can just change that to the solid color of the background.
You share amazing tips
Thank you Boss :)
Wow! this is just simply amazing Jeff!
So much for Photoshop. Google Chrome may be my new favorite design software…
Hi Jeffrey,
This is a nice lil’ technique. May I suggest adding `box-shadow: 1px 1px 3px #292929;` below the vendor specific properties, that way Opera (and maybe IE9!?!?) can play along too. :)
Good point. I forgot to do that. Screenr limits you to 5 minutes…so I was having to rush through it. :) I just updated the source code above.
Why not just use bottom: -11px; instead of top: 104%; ? I was getting a gap in the most recent version of firefox. and, this will stay consistent even if the height of the h1 changes?
It even looks passable in IE. :-)
Impressive. Thanks for sharing.
Great tip there, Jeffrey. I use this so much throughout my designs…
I seem to remember you having a similar tip a while ago…or was it my imagination?
Wow! Awsome! Great job! Very creative!
Very cool! Great job as always Jeffrey.
Awesome! Bookmarked for later use. What is the name of the plugin for “CSS Live-Edit” ?
We Developer Toolbar by Chris Pederick.
We = Web
Hi there,
Nice job.
Which editor are you using?
It updates instantly. Love it!
Cheers.
Thanks Jeffrey – great (and very efficient) demo.
Nice how you can set the transparency and only show the shape you want.
Pretty useful! I’ll definitely remember this for any future projects! Thanks.
That was very slick, thanks for sharing!
This is what nettuts should be all about! Small tips & tricks and more basic stuff for us newbies!
Good job! :)
Thanks, Ollie!
Great quick tip! :) Thanks!
Nice reminder of:
http://net.tutsplus.com/articles/news/fun-with-css-shapes/
This is exactly what I was looking to do for my new site theme! Now I don’t have to use any images. Great work, Jeffrey!
Very cool tip! I had no idea that could be done in CSS…
I have the worst timing, I wasted half an hour yesterday figuring this out myself, I’m sure it’l be usefull for others!
Great tut, thnx.
Off topic: Can i buy only 1 month premium?
Thank you for another fun CSS tutorial
Hungry for more…
Wow nice one going to use this in my next project. THANKS!!!
wow its cool
I’ve seen that before but the tut is great ! It really shows you how simple it is to make this kind of shapes.
Great tutorial with CSS shapes.
Thanks for sharing.
I blinked and it was done… A lot simpler than I thought!!!
Thanks, will definitely be using this on some upcoming projects, I have been actively looking for image alternatives and this is perfect
JEFF you have to tell me , How do come to discover/invent these awesome tricks ?
JEFF you have to tell me , How do you discover/invent these awesome tricks ?
It would be better for the .arrow to position it like this:
top: 100%;
margin-top: 2px;
Otherwise it will have a distance when the h1 is higher than one line.
Very Good tutorial anyway!
Would there be a reason why you would want to avoid z-indexing the shape, rather than positioning it below? For design purposes, it seems like z-indexing would be a better choice, but I’m not sure if there’s a programming reason behind it or not. http://voxcorvin.com/tests/css/shapes_test.html
Thanks for another awesome quick tip!
Cool!
Thanks for the tip.
Regards
D’une simplicité étonnante. Merci pour cet astuce.
I’ve tried similar techniques but this is also really slick.
Here is a technique I learned (somewhere on the internet) for transparent borders in IE6:
.arrow {border-color: pink; filter: chroma(color=pink);
I had no idea you could do this! You learn something new everyday eh…
Excellent :-)
Jeffrey,
I saw a similar tutorial on smashing mag a few weeks ago, is there a possibility where the fold has 3 different pictures. 1top 1 middle 1 bottom, where the view from the person who browses changes when you are a the top of the page, middle of the page, bottom of the page?
Awesome as always! Great tut!!!
Whow, I was doing these with images…
This is so mutch better! THX JEFF!
Great job as always Jeff !! :)
Well done !
Wow, that was really a neat trick!
Instead of using “top : 104%”, couldn’t you have just used “z-index” to put the arrow behind it all?
Thanks for the tricks!
I modified this slightly to go full width, looks to work in all browsers for me. Can anyone confirm?
http://www.jgdovin.com/test.html
Smart :)
It’s very cool, thanks for sharing
great tutorial, nice to know
cool! It took a while for me to understand how the fuck u dit that :P