CSS - Border

• 边框是实现三角形的部分，边框实际上并不是一个直线，如果我们将四条边设置不同的颜色，将边框逐渐放大，可以得到每条边框都是一个梯形

  • 

• 当分别取消边框的时候，发现下面几种情况：

  • 取消一条边的时候，与这条边相邻的两条边的接触部分会变成直的
  • 当仅有邻边时， 两个边会变成对分的三角
  • 当保留边没有其他接触时，极限情况所有东西都会消失
  • 

• 通过上图的变化规则，利用旋转、隐藏，以及设置内容宽高等属性，就能够实现其他类型的三角形

• /* style： */
  /* 钝角三角形： */
    .obtuseB {
      border-width: 0px 40px 40px 40px;
      border-color: transparent transparent #4285f4 transparent;
    }
  
    .obtuseL {
      border-width: 40px 0px 40px 40px;
      border-color: transparent transparent transparent #d9534f;
    }
  
    .obtuseR {
      border-width: 40px 40px 40px 0px;
      border-color: transparent #42f4aa transparent transparent;
    }
  
    .obtuseT {
      border-width: 40px 40px 0px 40px;
      border-color: #e8f442 transparent transparent transparent;
    }
  
    /* 钝角空心三角形： */
    .obtuseB.empty {
      position: relative;
      border-width: 0 40px 40px 40px;
      border-color: transparent transparent yellow transparent;
    }
    .obtuseB.empty::after {
      content: '';
      border-style: solid;
      border-width: 0 35px 35px 35px;
      border-color: transparent transparent #fff transparent;
      position: absolute;
      left: -35px;
      top: 3px
    }
  
    .obtuseL.empty {
      position: relative;
      border-width: 40px 0 40px 40px;
      border-color: transparent transparent transparent #d9534f;
    }
    .obtuseL.empty::after {
      content: '';
      border-style: solid;
      border-width: 35px 0 35px 35px;
      border-color: transparent transparent transparent #fff;
      position: absolute;
      left: -38px;
      top: -35px
    }
  
    .obtuseR.empty {
      position: relative;
      border-width: 40px 40px 40px 0;
      border-color: transparent #42f4aa transparent transparent;
    }
    .obtuseR.empty::after {
      content: '';
      border-style: solid;
      border-width: 35px 35px 35px 0;
      border-color: transparent #fff transparent transparent;
      position: absolute;
      left: 3px;
      top: -35px;
    }
  
    .obtuseT.empty {
      position: relative;
      border-width: 40px 40px 0px 40px;
      border-color: #e8f442 transparent transparent transparent;
    }
    .obtuseT.empty::after {
      content: '';
      border-style: solid;
      border-width: 35px 35px 0px 35px;
      border-color: #fff transparent transparent transparent;
      position: absolute;
      left: -35px;
      top: -38px;
    }
  
    /* 等边三角形： */
    .equalSidesB {
      border-width: 0px 40px 60px 40px;
      border-color: transparent transparent blue transparent;
    }
  
    .equalSidesL {
      border-width: 40px 0px 40px 60px;
      border-color: transparent transparent transparent red;
    }
  
    .equalSidesR {
      border-width: 40px 60px 40px 0px;
      border-color: transparent green transparent;
    }
  
    .equalSidesT {
      border-width: 60px 40px 0px 40px;
      border-color: yellow transparent transparent transparent;
    }
  
    /* 直角三角形： */
    .rightBL {
      border-width: 40px;
      border-color: transparent transparent blue blue;
    }
  
    .rightTL {
      border-width: 40px;
      border-color: red transparent transparent red;
    }
  
    .rightTR {
      border-width: 40px;
      border-color: green green transparent transparent;
    }
  
    .rightBR {
      border-width: 40px;
      border-color: transparent yellow yellow transparent;
    }
  

• // html
  <h1>钝角三角形：</h1>
    <div class="container">
      <div class="obtuseB triangle"></div>
      <div class="obtuseL triangle"></div>
      <div class="obtuseR triangle"></div>
      <div class="obtuseT triangle"></div>
    </div>
  
    <h1>钝角空心三角形：</h1>
    <div class="container">
      <div class="obtuseB empty triangle"></div>
      <div class="obtuseL empty triangle"></div>
      <div class="obtuseR empty triangle"></div>
      <div class="obtuseT empty triangle"></div>
    </div>
  
    <h1>等边三角形：</h1>
    <div class="container">
      <div class="equalSidesB triangle"></div>
      <div class="equalSidesL triangle"></div>
      <div class="equalSidesR triangle"></div>
      <div class="equalSidesT triangle"></div>
    </div>
  
    <h1>直角三角形：</h1>
    <div class="container">
      <div class="rightBL triangle"></div>
      <div class="rightTL triangle"></div>
      <div class="rightTR triangle"></div>
      <div class="rightBR triangle"></div>
    </div>
  

•