1
2
3
4
5 border-radius
6
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
17
18
19
20
2，向下的三角
1
2
3
4
5 border-radius
6
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
17
18
19
20
3，向左的三角
1
2
3
4
5 border-radius
6
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
17
18
19
20
4，向右的三角
1
2
3
4
5 border-radius
6
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
17
18
19
20
查看更多关于关于CSS3三角的实现_html/css_WEB-ITnose的详细内容...