利用border绘制三角形

/*上三角。下边距不设置影响位置*/
      .box6 {
          width: 0px;
          height: 0px;
          -webkit-box-sizing:border-box;
          box-sizing:border-box;
          border-top: 50px solid #f00;
          border-left: 50px solid #fff;
          /*border-bottom: 50px solid #f00;*/
         border-right: 50px solid #fff;
     }
     /*下三角。上边距不设置影响位置*/
      .box7 {
         width: 0px;
         height: 0px;
         -webkit-box-sizing:border-box;
         box-sizing:border-box;
         /*border-top: 50px solid #fff;*/
         border-left: 50px solid #fff;
         border-bottom: 50px solid #f00;
         border-right: 50px solid #fff;
     }
     /*左三角*/
      .box8 {
         width: 0px;
         height: 0px;
         -webkit-box-sizing:border-box;
         box-sizing:border-box;
         border-top: 50px solid #fff;
         border-left: 50px solid #f00;
         border-bottom: 50px solid #fff;
         /*border-right: 50px solid #fff;*/
     }
     /*右三角*/
      .box9 {
         width: 0px;
         height: 0px;
         -webkit-box-sizing:border-box;
         box-sizing:border-box;
         border-top: 50px solid #fff;
         /*border-left: 50px solid #f00;*/
         border-bottom: 50px solid #fff;
         border-right: 50px solid #f00;
     }