my-code/Pseudo-classes/P6.html at master · HongqingCao/my-code · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/P6.css" />
		<script src="http://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>
	</head>
	<body>
		<div class="block -berry edge--bottom">
		    <h1>Bottom Angled Edge</h1>
		</div>

		<div class="block -blue edge--bottom--reverse">
		    <h1>Bottom Angled Edge</h1>
		    <p>Reversed</p>
		</div>

		<div class="block -berry edge--top">
		    <h1>Top Angled Edge</h1>
		</div>

		<div class="block -blue edge--top--reverse">
		    <h1>Top Angled Edge</h1>
		    <p>Reversed</p>
		</div>

		<div class="block -orange edge--both">
		    <h1>Top & Bottom Angled Edges</h1>
		</div>

		<div class="block -green edge--both--reverse">
		    <h1>Top & Bottom Angled Edges</h1>
		    <p>Reversed</p>
		</div>
	</body>
</html>