首先我们先利用CSS实现最基本的三角形，搜索百度，发现了如下的方式，对我来说是知道，却老是记不住的一些实现方式，
哪天自己打算单独实现了，就不是这个属性搞错就是其他，所以几天好好整理一下，带着自己的理解来记忆~

• 上三角形

    .triangle-up{
        width: 0;
        height: 0;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-bottom: 100px solid red;

    }

• 下三角形

    .triangle-down{
        width: 0;
        height: 0;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-top: 100px sold transparent;
    }

• 左三角形

    .triangle-down{
        width: 0;
        height: 0;
        border-top: 100px sold transparent;
        border-bottom: 100px solid transparent;
        border-right: 100px solid red;

    }

• 右三角形

    .triangle-down{
        width: 0;
        height: 0;
        border-top: 100px sold transparent;
        border-bottom: 100px solid transparent;
        border-right: 100px solid red;
    }

最后我们看到的效果，就如下图所示：

分析一下，她的实现思想，我们就可以在后面很容易实现它，甚至做出其他的三角形，以及更丰富的样式。我们以上三角形为例子：

这个三角形之所以形成，完全依赖于我们的 div 元素没有宽度高度，只是完全依赖于元素的border 属性来实现的。所以第一点就是：

1. 实现三角形的元素宽度和高度设置为0

然后就是border属性的使用，我们审查元素，发现，这个三角形，高度其实是由border-bottm 这个属性的100px实现的，而宽度则是200px，很简单border－left 与border－right 的10px 相加得到的，那么我们在console 中去修改border-left 属性的值，会发现三角形的形状也随之变化，由此我们得出第二点：

1. 高度有对边实现，也就是我实现上三角形，border-left border-right 决定三角形宽度， 并不决定颜色，设置为transparent，而三角形的高度由对边撑开，还要设置颜色。

由此扩展开，我们可以通过如下制作左右直角三角形，由于border 默认宽度为 0，所以我们不设置其中左边，即可得到左直角三角形

    .triangle-leftstraight{
        width: 0;
        height: 0;
        border-right: 100px solid transparent;
        border-bottom: 100px solid red; 
    }