CSS3设置三角形原理

先说原理 ： 通过设置盒子的边框来控制

.box .content-box {
        width: 0px;
        height: 0px;
        border-top:100px solid transparent;
        border-bottom: 100px solid red ;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent; 
      }

盒子宽高均为0px 之后再单独设置某一边框进行控制。如你想要一个倒三角，就设置上边框的宽度，其他边框颜色隐藏掉就OK啦