三角形理解：

先理解容器的border原理
    在容器直角处，两个border其实是交汇在那里的

    设置border的宽度，和容器的宽高 ，宽高小于border的总和，则以border的总和为主

    如果设置的容器宽高大于boder的总和，多出的部分就是容器的内容区了

    最好的就是宽高的总格等于border的总和
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <style>
         .sanjiao {
             width: 30px;
             height: 30px;
             box-sizing: border-box;
             border-top:  20px solid red;
             border-left:  20px solid blue;
             border-right:  20px solid rgb(107, 99, 99);
             border-bottom:  20px solid rgb(59, 14, 14);
         }
     </style>
</head>
<body>
    <div class="sanjiao" title="我是kaifan"></div>
    <!-- 三角形理解： 

        先理解容器的border原理
        在容器直角处，两个border其实是交汇在那里的

        设置border的宽度，和容器的宽高 ，宽高小于border的总和，则以border的总和为主

        如果设置的容器宽高大于boder的总和，多出的部分就是容器的内容区了

        最好的就是宽高的总格等于border的总和
     -->
</body>
</html>

针对理解中的三种情况：
1、w 50 ---- h 50

用纯css实现三角形，对用css实现三角形的理解_css3


用纯css实现三角形，对用css实现三角形的理解_css_02


1、w 10 ---- h 10

用纯css实现三角形，对用css实现三角形的理解_css3_03


用纯css实现三角形，对用css实现三角形的理解_html_04


1、w 40 ---- h 40

用纯css实现三角形，对用css实现三角形的理解_前端_05


用纯css实现三角形，对用css实现三角形的理解_前端_06