About the implementation of CSS3 triangle_html/css_WEB-ITnose

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