CSS3 实用技巧:制作三角形

 

 

 

 

 

 

/* create an arrow that points up */div.arrow-up {  width:0px;   height:0px;   border-left:5px solid transparent;  /* left arrow slant */  border-right:5px solid transparent; /* right arrow slant */  border-bottom:5px solid #2f2f2f; /* bottom, add background color here */  font-size:0px;  line-height:0px;}/* create an arrow that points down */div.arrow-down {  width:0px;   height:0px;   border-left:5px solid transparent;  border-right:5px solid transparent;  border-top:5px solid #2f2f2f;  font-size:0px;  line-height:0px;}/* create an arrow that points left */div.arrow-left {  width:0px;   height:0px;   border-bottom:5px solid transparent;  /* left arrow slant */  border-top:5px solid transparent; /* right arrow slant */  border-right:5px solid #2f2f2f; /* bottom, add background color here */  font-size:0px;  line-height:0px;}/* create an arrow that points right */div.arrow-right {  width:0px;   height:0px;   border-bottom:5px solid transparent;  /* left arrow slant */  border-top:5px solid transparent; /* right arrow slant */  border-left:5px solid #2f2f2f; /* bottom, add background color here */  font-size:0px;  line-height:0px;}

 

更多实用 CSS3 技巧:帮助你美化网站的10+实用 CSS3 技巧

有话要说