关于CSS3三角的实现

浏览数：26 / 时间：2015年06月09日

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三角的实现