CSS3の実装について Triangle_html/css_WEB-ITnose

1、向上の三角

1 2
3 4
5 境界半径
6 <;スタイル＞
7 div{
8 幅: 0;
9 高さ: 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 境界半径
6 <;スタイル＞
7 div{
8 幅: 0;
9 高さ: 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 境界半径
6 <;スタイル＞
7 div{
8 幅: 0;
9 高さ: 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 境界半径
6 <;スタイル＞
7 div{
8 幅: 0;
9 高さ: 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