css-画三角箭头

.arrow {
        width: 0; 
         height: 0; 
         content: "";
         border: solid 10px #7c7;
         display: block; 
         border-top-color:transparent;
        border-left-color:transparent; 
         border-bottom-color:transparent;
     }

 原理：设置一个足够宽的边框

border: solid 10px #7c7;

 然后通过边框按斜线分四等份的方式设置每一等份的情况

         border-top-color:transparent;
        border-left-color:transparent; 
         border-bottom-color:transparent;