CSS画三角形

具体代码可以参加我的GitHub：https://github.com/liyating8023/usualLog.git

这里解剖一下画三角形的思路，分为直角三角形和向内三角形两种。

一、直角三角形

比如想画左上三角形，看图可以有两种实现方法：绿色下面和蓝色右边的两种。

绿色下面的实现方法：不要border-right，就是切掉纵轴的右边；然后不要border-top，即切掉横轴的上面，所以只剩下border-left和border-bottom，将border-left的background值为#0f0，border-bottom的background为transparent，即透明色，就切好了。

蓝色右边的实现方法：不要border-left，就是切掉纵轴的左边；然后不要border-bottom，即切掉横轴的下面，所以只剩下border-right和border-top，将border-top的background值为#00f，border-bottom的background为transparent，即透明色，就切好了。

1.直角三角形的CSS代码实现：

.kailongLeftTop {
      width: 0;
      height: 0;
      border-bottom: 100px solid transparent;
      border-left: 100px solid #0f0;
      /* 方法二 
      border-top: 100px solid #00f;
      border-right: 100px solid transparent; */
    }

    .kailongRightTop {
      width: 0;
      height: 0;
      border-bottom: 100px solid transparent;
      border-right: 100px solid #0f0;
      /* 方法二 
      border-top: 100px solid #00f;
      border-left: 100px solid transparent; */
    }

    .kailongLeftBottom {
      width: 0;
      height: 0;
      border-top: 100px solid transparent;
      border-left: 100px solid #0f0;
      /* 方法二
      border-right: 100px solid transparent;
      border-bottom: 100px solid #f00; */
    }

    .kailongRightBottom {
      width: 0;
      height: 0;
      border-top: 100px solid transparent;
      border-right: 100px solid #0f0;
      /* 方法二
      border-bottom: 100px solid #f00;
      border-left: 100px solid transparent; */
    }

2.效果如下：

二、向内三角形

1.向内三角形CSS代码实现：

.kailongBottom{
        width: 0;
        height: 0;
        border-top: 100px solid #00f;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
      }
      .kailongTop{
        width: 0;
        height: 0;
        border-bottom: 100px solid #f00;
        border-right: 100px solid transparent;
        border-left: 100px solid transparent;
      }
      .kailongLeft{
        width: 0;
        height: 0;
        border-right: 100px solid #f0f;
        border-top: 100px solid transparent;
        border-bottom: 100px solid transparent;
      }
      .kailongRight{
        width: 0;
        height: 0;
        border-left: 100px solid #0f0;
        border-top: 100px solid transparent;
        border-bottom: 100px solid transparent;
      }

2.效果如下：