CSS学习笔记：利用border绘制三角形

在前端的笔试、面试过程中，经常会出现一些不规则图形的CSS设置，基本上多是矩形外加一个三角形。利用CSS属性可以实现三角形的生成，主要利用上下左右的边距的折叠。　

　

1、第一种图形：

 .box {
         width: 200px;
         height: 200px;
         -webkit-box-sizing:border-box;
         box-sizing:border-box;
         border-top: 50px solid #f00;
         border-left: 50px solid #ff0;
         border-bottom: 50px solid #0f0;
         border-right: 50px solid #00f;
     }

2、第二种图形：

 .box1 {
         width: 0px;
         height: 0px;
         -webkit-box-sizing:border-box;
         box-sizing:border-box;
         border-top: 50px solid #f00;
         border-left: 50px solid #ff0;
         border-bottom: 50px solid #0f0;
         border-right: 50px solid #00f;
     }

3、右上、右下、左上、左下三角形：

     /*右上三角*/
     .box2 {
         width: 0px;
         height: 0px;
         -webkit-box-sizing:border-box;
         box-sizing:border-box;
         border-top: 50px solid #f00;
         border-left: 50px solid #fff;
     }
     /*右下三角*/
     .box3 {
         width: 0px;
         height: 0px;
         -webkit-box-sizing:border-box;
         box-sizing:border-box;
         border-left: 50px solid #fff;
         border-bottom: 50px solid #f00;
     }
     /*左上三角*/
     .box4 {
         width: 0px;
         height: 0px;
         -webkit-box-sizing:border-box;
         box-sizing:border-box;
         border-top: 50px solid #f00;
         border-right: 50px solid #fff;
     }

4、上下左右三角形：

     /*上三角。下边距不设置影响位置*/
     .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;
     }