css边框及三角原理详解

<style>
    /* 总述:一个实际的区域大小是由宽和高同时决定的，而边框只占了其中之一
    边框虽然设置了宽度，但却也只设置了宽度，所以不能撑起一个实际的区域大小
    在我们的视野中，上下边框设置的宽度拥有的是相当于实际区域的高度，左右边框拥有的是相当于实际区域的宽度
    在我们平时的代码中设置边框时，都是依附于有设置宽高的盒子，可以给边框补充相应的所需要撑起区域的缺陷（即缺少宽度或高度），
所以可以显示出边框的区域
     */
    /* 1.以下代码结果不能显示出边框的原因：
    虽然给右边框设置了宽度，但是由于没有给其盒子宽高，并且没有给其它边框设置宽度（后做解析），所以不能撑起一个边框的区域，
    进而无法显示 */
    
    .yi {
        width: 0px;
        height: 0px;
        border: transparent;
        border-top: 50px solid red;
    }
    /* 一、有关依附于盒子显示边框区域  */
    
     /* 2.以下代码能显示边框区域的原因
     在以下代码中，和第一段代码的区别是给盒子设置了区域大小
     最终能显示出右边框的区域大小
     原因是盒子的高度给右边框提供了一个撑起盒子大小所缺少的高度元素
     正是因此，导致我们平时写宽度的时候没有注意到这些 */
     .er {
        width: 5px;
        height: 5px;
        background-color: red;
        border-right: 50px solid skyblue;

     }
     /* 二、有关边框互相作用显示边框区域 */
    /* 3.两个相邻边框撑起区域大小的原因：
    在以下代码中，和第一段代码的区别是给右边框设置了一个有宽度的上边框
    最终显示的区域是上下边框的交汇处
    原因是上边框的宽度给右边框提供了可以撑起区域大小所需要的高度，而右边框的宽度给上边框提供了可以撑起区域大小所需要的宽度 */
    .san {
        width: 0px;
        height: 0px;
        border: transparent;
         border-right: 50px solid #000;
        border-top: 50px solid red;
    }
    /* 4.需要相邻边框才能撑起区域大小的原因：
    在以下代码中，和上一段代码的区别是两个设置了宽度的边框并不相邻
    最终没有显示出区域
    原因是top和bottom边框的宽度相对于所需要撑起的区域而言，都是区域的高度，缺少了宽度，所以没有显示 */
    .si {
        width: 0px;
        height: 0px;
        border: transparent;
        border-bottom: 50px solid skyblue;
        border-top: 50px solid red;
    }
    /* 5.用四个边框同时撑起区域大小代码
    此处给四个边框都设置了宽度，以此来达到撑起右边框区域大小的目的
    但实际上撑起右边框区域的只有上下两个盒子（下段代码对此作解释，并说明设置的边框大小是50px，但三角形底长却是100px的原因） */
   .wu {
        width: 0px;
        height: 0px;
        border:50px solid transparent;
        border-right: 50px solid black;
   }
   /* 6.边框区域大小计算解释
   此处给四个边框分别设置了不同的颜色及宽度
   由之前的说明可以知道，右边框区域缺少的是高度，而上下边框的宽度在相对方向上能给它提供塑造边框区域所需要的高度，
   所以右边框区域的底边大小为上下边框宽度的叠加值，其它亦是同理 */
   .liu {
       width: 0px;
       height: 0px;
       border-top: 20px solid red;
       border-right: 50px solid black;
       border-bottom: 100px solid skyblue;
       border-left: 40px solid blue;
   }
</style>

<div class="yi"></div>
<div class="er"></div>
<div class="san"></div>
<div class="si"></div>
<div class="wu"></div>
<div class="liu"></div>