Try Tuts+ Premium, Get Cash Back!
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
← Older Comments
  • Mr-H

    thank you very much jeff, youre the best in css

  • http://clark-kim.zzl.org kim

    nice tutorial!

    but i have a question!

    if i want the “.arrow” class on the right side of the header to, how do i do?

    / kim

    • Chris

      If you want the arrow on the right side, change
      .arrow {
      width: 0; height: 0;
      line-height: 0;
      border-left: 20px solid transparent;
      border-top: 10px solid #c8c8c8;
      top: 104%;
      left: 0;
      position: absolute;
      }

      with:

      .arrow {
      width: 0; height: 0;
      line-height: 0;
      border-right: 20px solid transparent;
      border-top: 10px solid #c8c8c8;
      top: 104%;
      right: 0;
      position: absolute;
      }

  • http://iktravel.blogspot.com chongfai13

    Thanks for the hard work. love it

  • Joe Robison

    Wow you are kind of a css stud, I can’t believe you did it that fast….I learned so much.

  • Nisal

    Nice tut on PSD TO HTML keep it up.

  • Sam Burns

    If you want to set the H1 with some Opacity how do you make it so that the text has no opacity.

    I know how to do this with divs by setting a parent and child and setting the position:relativve, but how would you do this with and h1?

  • http://jitendravyas.com/ jitendra vyas

    Can we make this possible without using blank span?

    • Pablo Mendoza

      You can use h1:before, something like this:

      h1:before{
      content: ‘ ‘;
      position: relative;
      left: …;
      top: …;
      .
      .
      /*attributes for the arrow*/
      .
      }

  • Steve

    Very nice. Another note to self….. Get the Edit CSS addon for Firefox. :)

  • dendog

    please remove my previous comment (awesome! so much better than using images. thanks for the vid). i don’t want my image showing up on gravatar – sorry about that

  • http://www.ohmedcann.org Ben M

    Is there any reason the arrow would duplicate itself below and to the right on a CSS layout? I’m a novice at this volunteering for a campaign. Thanks!

  • marvelous

    Greetings,
    I really like ur tutorial. and i apriciate but could you make valid (CSS level 2.1) OR CSS3. IT SHOWS AN ERROR .i hope hearing from u soon . thank u

  • http://joemazziliano.com Joe

    Thanks for this, works nicely on my site. Also works nicely with CSS PIE. ;)

  • http://coolhacking-tricks.blogspot.com/ ndark

    Than you very nice tutorial..

  • Henry CQ

    Nice tutorial !!!
    How do make the arrow located at top-right corner ?

  • http://www.ravenousravendesign.com Heather Wood

    I really need to get a subscription to the tuts network. I have been trying to do this on my own and stumbled upon this by accident. You make it look so easy and I thank you for sharing with the world. Freelancers like me appreciate this so much ^_^

  • http://www.esylhet.com/ sylhet

    i am searching something like this tuts.Nice but i ma confusing what is the css property of the corner ?

  • Nigel

    what would the code look like if i wanted the arrow on both sides?

  • Joe

    Nice job, Jeff! I really like this!

    Instead of moving the triangle down 4 pixels, I’d just give it a lower z-index than the header itself so that it’d appear behind the shadow. Other than that, it’s top notch!

    @ Nigel: You’d have to create another span container (with a different class, so you could style it differently) inside of the parent h1 element, and style it ‘right:0;’ instead of ‘left:0;’. You should also make sure to overlap the h1 over both sides with ‘margin: 0 -20px;’, which will make both sides hang over the background.

  • http://twitter.com/brettcairns Brett

    Great article and much appreciated. Will use this on the new website that I am in the process of designing to add some nice finishing touches to it.

  • Dipen

    what do i need to do for both side arrow?

  • ttxnam

    Thank you so much !!! It’s very useful :)

  • borat

    very nice…..

← Older Comments