当前位置:Gxlcms > html代码 > 关于CSS3三角的实现_html/css_WEB-ITnose

关于CSS3三角的实现_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:22人阅读

1,向上的三角

1
2 < html >
3 < head >
4 < meta charset ="utf-8" >
5 < title >border-radius
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
15
16 < body >
17 < div >
18
19
20

2,向下的三角

1
2 < html >
3 < head >
4 < meta charset ="utf-8" >
5 < title >border-radius
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
15
16 < body >
17 < div >
18
19

20

3,向左的三角

1
2 < html >
3 < head >
4 < meta charset ="utf-8" >
5 < title >border-radius
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
15
16 < body >
17 < div >
18
19

20

4,向右的三角

1
2 < html >
3 < head >
4 < meta charset ="utf-8" >
5 < title >border-radius
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
15
16 < body >
17 < div >
18
19

20

人气教程排行