css直接写出小三角

 1 　　　　　　　　　/*箭头向上*/
 2                 .arrow-up {
 3                         width:0; 
 4                         height:0; 
 5                         border-left:30px solid transparent;
 6                         border-right:30px solid transparent;
 7                         border-bottom:30px solid #000;
 8                 }
 9                         
10                  /*箭头向下*/
11                 .arrow-down {
12                         width:0; 
13                         height:0; 
14                         border-left:30px solid transparent;
15                         border-right:30px solid transparent;
16                         border-top:30px solid #000;
17                 }
18                         
19                  /*箭头向左*/
20                 .arrow-left {
21                         width:0; 
22                         height:0; 
23                         border-top:30px solid transparent;
24                         border-bottom:30px solid transparent; 
25                         border-right:30px solid #000; 
26                 }
27                    
28                 /*箭头向右*/
29                 .arrow-right {
30                         width:0; 
31                         height:0; 
32                         border-top:30px solid transparent;
33                         border-bottom: 30px solid transparent;
34                         border-left: 30px solid #000;
35                 }
36                 
37                 /*:after 伪元素在元素之后添加内容实现小三角*/
38                 .box{ width:300px; height:300px; background:#838383; position:relative;}
39                 .box:after{
40                     position:absolute;
41                     right:-20px;
42                     top:10px;
43                     display:block;
44                     content:"";
45                     width:0; 
46                     height:0; 
47                     border-top:20px solid transparent;
48                     border-bottom: 20px solid transparent;
49                     border-left: 20px solid #838383;
50                 }