css-各种各样三角形CSS

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

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

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

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

复制

  .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>