首页 > 代码库 > 纯css做三角形形状

纯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 }