关于CSS3三角的实现

时间：2015-05-17 23:09:26 阅读：122 评论：0 收藏：0 [点我收藏+]

标签：

1，向上的三角

1 <!doctype html>
2 <html>
3 <head>
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 </head>
16 <body>
17 <div>
18 </div>
19 </body>
20 </html>

2，向下的三角

1 <!doctype html>
2 <html>
3 <head>
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 </head>
16 <body>
17 <div>
18 </div>
19 </body>

20 </html>

3，向左的三角

1 <!doctype html>
2 <html>
3 <head>
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 </head>
16 <body>
17 <div>
18 </div>
19 </body>

20 </html>

4，向右的三角

1 <!doctype html>
2 <html>
3 <head>
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 </head>
16 <body>
17 <div>
18 </div>
19 </body>

20 </html>

关于CSS3三角的实现

标签：

原文地址：http://www.cnblogs.com/White-Quality/p/4510668.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行