Quick Tip: Practical CSS Shapes

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?

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