Advertisement
  1. Code
  2. HTML & CSS

Quick Tip: Practical CSS Shapes

Scroll to top
Read Time: 1 min

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

1
2
<!DOCTYPE html>
3
4
<html lang="en">
5
<head>
6
	<meta charset="utf-8">
7
	<title>CSS Shapes</title>
8
	
9
	<!--[if IE]>

10
		<style>

11
			.arrow { top: 100%; }

12
		</style>

13
	<![endif]-->
14
15
</head>
16
<body>
17
	 <div id="container">
18
     
19
		<h1> My Heading <span class="arrow"></span> </h1>
20
		
21
	</div>
22
</body>
23
</html>

Final CSS

1
2
#container {
3
	background: #666;
4
	margin: auto;
5
	width: 500px;
6
	height: 700px;
7
	padding-top: 30px;
8
	font-family: helvetica, arial, sans-serif;
9
	}
10
11
h1 {
12
	 background: #e3e3e3;
13
	 background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8);
14
	 background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8));
15
	 padding: 10px 20px;
16
	 margin-left: -20px;
17
	 margin-top: 0;
18
	 position: relative;
19
	 width: 70%;
20
21
	-moz-box-shadow: 1px 1px 3px #292929;
22
	-webkit-box-shadow: 1px 1px 3px #292929;
23
       box-shadow: 1px 1px 3px #292929;
24
25
	color: #454545;
26
	text-shadow: 0 1px 0 white;
27
}
28
29
.arrow {
30
	 width: 0; height: 0;
31
	 line-height: 0;
32
	 border-left: 20px solid transparent;
33
	 border-top: 10px solid #c8c8c8;
34
	 top: 104%;
35
	 left: 0;
36
	 position: absolute;
37
}
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.