纯css做三角形形状

 /* 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;
 }