码迷,mamicode.com
首页 > Web开发 > 详细

纯css做三角形形状

时间:2014-07-01 16:53:30      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   width   line   div   

 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

纯css做三角形形状

标签:style   blog   color   width   line   div   

原文地址:http://www.cnblogs.com/wxydigua/p/3817998.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!