Quick Tip: Practical CSS Shapes
videos

Quick Tip: Practical CSS Shapes

on May 13th 2010 with 139 comments
Tutorial Details
  • Topic: CSS
  • Difficulty: Intermediate
  • Estimated Completion Time: 4 Minutes
Download Source Files
Demo View It Online

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.


Subscribe to our YouTube page to watch all of the video tutorials!

Rather watch on Screenr.com?

Example

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

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
Newer Comments →
  • http://drake09.deviantart.comq C0de(

    This is awesome! thanks for the tip!

  • http://de.fotolia.com/p/206566/partner/206566 Koka Koala

    WOW .. so qick and easy … I like it

  • http://www.joomlabucket.com Matic

    Nice effect! How does it degrates in non-css3 brosers?

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      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.

      • Khalil

        You share amazing tips
        Thank you Boss :)

  • http://ljtyson.tumblr.com/ Lj

    Wow! this is just simply amazing Jeff!

  • http://www.scottcorgan.com Scott Corgan

    So much for Photoshop. Google Chrome may be my new favorite design software…

  • http://miketaylr.com Mike Taylor

    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. :)

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      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.

  • http://www.tastybytes.net Brian

    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?

  • Erik

    It even looks passable in IE. :-)

  • http://www.deluxeblogtips.com Rilwis

    Impressive. Thanks for sharing.

  • CodeDude

    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?

  • http://www.alexpica.com Alex P

    Wow! Awsome! Great job! Very creative!

  • http://www.giulianoliker.com Giuliano

    Very cool! Great job as always Jeffrey.

  • Daniel S

    Awesome! Bookmarked for later use. What is the name of the plugin for “CSS Live-Edit” ?

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      We Developer Toolbar by Chris Pederick.

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        We = Web

  • KF

    Hi there,

    Nice job.

    Which editor are you using?

    It updates instantly. Love it!

    Cheers.

  • http://www.codegeek.net Ron

    Thanks Jeffrey – great (and very efficient) demo.

  • http://zubeta.com/beta 9swords

    Nice how you can set the transparency and only show the shape you want.

  • http://Altramax.com Dylan Opet

    Pretty useful! I’ll definitely remember this for any future projects! Thanks.

  • http://newleafinternet.com Ben

    That was very slick, thanks for sharing!

  • Olle

    This is what nettuts should be all about! Small tips & tricks and more basic stuff for us newbies!

    Good job! :)

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks, Ollie!

  • http://www.philohermans.com Philo Hermans

    Great quick tip! :) Thanks!

  • dave
  • Aaron

    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!

  • http://code621.com Dan

    Very cool tip! I had no idea that could be done in CSS…

  • http://www.codealamode.net Tessa

    I have the worst timing, I wasted half an hour yesterday figuring this out myself, I’m sure it’l be usefull for others!

  • Damion

    Great tut, thnx.

    Off topic: Can i buy only 1 month premium?

  • edanTal

    Thank you for another fun CSS tutorial
    Hungry for more…

  • Craig

    Wow nice one going to use this in my next project. THANKS!!!

  • http://warungmobil.com/ iqranegara

    wow its cool

  • http://www.cbesslabs.com Bratu Sebastian

    I’ve seen that before but the tut is great ! It really shows you how simple it is to make this kind of shapes.

  • http://www.jsxtech.com Jaspal Singh

    Great tutorial with CSS shapes.
    Thanks for sharing.

  • http://jorgefernandezonline.com Jorge Fernandez

    I blinked and it was done… A lot simpler than I thought!!!

  • http://cheekymonkeymedia.ca Rick

    Thanks, will definitely be using this on some upcoming projects, I have been actively looking for image alternatives and this is perfect

  • chetan

    JEFF you have to tell me , How do come to discover/invent these awesome tricks ?

    • chetan

      JEFF you have to tell me , How do you discover/invent these awesome tricks ?

  • risetothesky

    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!

  • CorvosKK

    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!

  • http://php.quicoto.com quicoto

    Cool!

    Thanks for the tip.

    Regards

  • Ferdinand AMOI

    D’une simplicité étonnante. Merci pour cet astuce.

  • http://twitter.com/stephenfrank stephenfrank

    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);

  • http://fatal-exception.co.uk dVyper

    I had no idea you could do this! You learn something new everyday eh…

    Excellent :-)

  • http://www.fl3x.be Remmelt

    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?

  • http://www.sideshow-systems.de Flo

    Awesome as always! Great tut!!!

  • http://www.designfromwithin.com ThaClown

    Whow, I was doing these with images…

    This is so mutch better! THX JEFF!

  • http://www.derekkirk.com Derek

    Great job as always Jeff !! :)

  • http://stetro.wordpress.com stetro

    Well done !

  • http://www.bertrandLirette.com Bertrand

    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!

  • Josh

    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

  • http://spicydesign.ca Alex ElChehimi

    Smart :)

  • jmarreros

    It’s very cool, thanks for sharing

  • http://tutorijali.hdonweb.com/ Tutorijali HDonWEB

    great tutorial, nice to know

  • Felix

    cool! It took a while for me to understand how the fuck u dit that :P

Newer Comments →