边框操作（三角形）

 **边框宽度有无对盒子的影响 **<br />    1、**当仅有邻边时， 两个边会变成对分的三角**<br />    2、当取消一条边时，与这条边相邻两条边的接触部分会变直<br />画三角形方法：<br />  宽高设置为0，相邻的三条边，设为相同宽度，期中将相对的两条边颜色设为透明。<br />    当宽高为零，有一条边框没有时，对面变宽会伸手过来（画三角形的方法）；<br />![1631186456(1).jpg](https://cdn.nlark.com/yuque/0/2021/jpeg/12838618/1631186463371-a27f7add-1067-4b49-a57a-9c22a04af9cc.jpeg#clientId=u42528195-5040-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=86&id=u4494e0f0&margin=%5Bobject%20Object%5D&name=1631186456%281%29.jpg&originHeight=86&originWidth=394&originalType=binary&ratio=1&rotation=0&showTitle=false&size=9718&status=done&style=none&taskId=ub3e4c902-a78b-4f02-81fb-e93aa64c0a6&title=&width=394)<br />**    画直角三角形**（宽高为零，**相邻边**设一样宽度（相邻边接触部分会），斜分空间，再隐藏一个边框） <br />  宽高设为0，相邻两条边设置相同宽度，将其中一条颜色设为透明<br />    ![image.png](https://cdn.nlark.com/yuque/0/2021/png/12838618/1631186484038-43b214ad-cd27-438c-82b3-51993d268489.png#clientId=u42528195-5040-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=79&id=u91683c8e&margin=%5Bobject%20Object%5D&name=image.png&originHeight=79&originWidth=378&originalType=binary&ratio=1&rotation=0&showTitle=false&size=7178&status=done&style=none&taskId=u07ac3705-0225-4e2a-9071-478b0fd7e07&title=&width=378)

    /* 1、某一边框宽度为0 */
    /* .triangle {
      width: 0px;
      height: 0px;
      border-style: solid;
      border-width: 0 50px 50px;
      border-color: transparent transparent #d9534f;
      position: relative;
    } */
    /* 2、四个边框都有值，隐藏其他三个边框  这种方式会多占一个边框的宽度 */
    /* .triangle {
      width: 0px;
      height: 0px;
      border-style: solid;
      border-width: 50px;
      border-color: transparent transparent transparent #d9534f;
    } */
    /* 想要不占位置，可以在后面添加一个伪元素三角形，空心三角形可以将伪类元素移到盒子中心进行遮盖 */
    /* .triangle {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 50px 50px;
      border-color: transparent transparent #d9534f;
      position: relative;
    } */
    /* .triangle:after {
      content: "";
      border-style: solid;
      border-width: 0 40px 40px;
      border-color: transparent transparent #96ceb4;
      position: absolute;
      top: 6px;
      left: -40px;
    } */