纯css做三角形形状

 1 /* create an arrow that points up */
 2 div.arrow-up {
 3   width:0px;
 4   height:0px;
 5   border-left:5px solid transparent;  /* left arrow slant */
 6   border-right:5px solid transparent; /* right arrow slant */
 7   border-bottom:5px solid #2f2f2f; /* bottom, add background color here */
 8   font-size:0px;
 9   line-height:0px;
10 }
11
12 /* create an arrow that points down */
13 div.arrow-down {
14   width:0px;
15   height:0px;
16   border-left:5px solid transparent;
17   border-right:5px solid transparent;
18   border-top:5px solid #2f2f2f;
19   font-size:0px;
20   line-height:0px;
21 }
22
23 /* create an arrow that points left */
24 div.arrow-left {
25   width:0px;
26   height:0px;
27   border-bottom:5px solid transparent;  /* left arrow slant */
28   border-top:5px solid transparent; /* right arrow slant */
29   border-right:5px solid #2f2f2f; /* bottom, add background color here */
30   font-size:0px;
31   line-height:0px;
32 }
33
34 /* create an arrow that points right */
35 div.arrow-right {
36   width:0px;
37   height:0px;
38   border-bottom:5px solid transparent;  /* left arrow slant */
39   border-top:5px solid transparent; /* right arrow slant */
40   border-left:5px solid #2f2f2f; /* bottom, add background color here */
41   font-size:0px;
42   line-height:0px;
43 }

纯css做三角形形状,布布扣,bubuko.com