About the implementation of the CSS3 triangle, the implementation of the CSS3 triangle
1. triangle up
1 <! Doctype html>
2 3 4 <meta charset = "UTF-8">
5 <title> border-radius </title>
6 <style>
7 div {
8 width: 0;
9 height: 0;
10 border-left: 20px solid transparent;
11 border-right: 20px solid transparent;
12 border-bottom: 20px solid # ccc;
13}
14 </style>
15 16 <body>
17 <div>
18 </div>
19 </body>
20 2. Downward triangle
1 <! Doctype html>
2 3 4 <meta charset = "UTF-8">
5 <title> border-radius </title>
6 <style>
7 div {
8 width: 0;
9 height: 0;
10 border-left: 20px solid transparent;
11 border-right: 20px solid transparent;
12 border-top: 20px solid # ccc;
13}
14 </style>
15 16 <body>
17 <div>
18 </div>
19 </body>
20
3. Triangle to the left
1 <! Doctype html>
2 3 4 <meta charset = "UTF-8">
5 <title> border-radius </title>
6 <style>
7 div {
8 width: 0;
9 height: 0;
10 border-top: 20px solid transparent;
11 border-bottom: 20px solid transparent;
12 border-right: 20px solid # ccc;
13}
14 </style>
15 16 <body>
17 <div>
18 </div>
19 </body>
20
4. Triangle to the right
1 <! Doctype html>
2 3 4 <meta charset = "UTF-8">
5 <title> border-radius </title>
6 <style>
7 div {
8 width: 0;
9 height: 0;
10 border-top: 20px solid transparent;
11 border-bottom: 20px solid transparent;
12 border-left: 20px solid # ccc;
13}
14 </style>
15 16 <body>
17 <div>
18 </div>
19 </body>
20
