Try Tuts+ Premium, Get Cash Back!
Quick Tip: Practical CSS Shapes
videos

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.

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

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • 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…..