工作中有时候一个三角图标来不及切图或者你就是不想切图,那就用下面的方法解决。

1
2
3
4
5
6
7
8
9
10
/* 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;
}
1
2
3
4
5
6
7
8
9
10
/* 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;
}
1
2
3
4
5
6
7
8
9
10
/* 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;
}
1
2
3
4
5
6
7
8
9
10
/* 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;
}