三角形应用场景

• 一些网站导航栏选中时会有下三角形标识

• 本网站应用：

  

三角形实现方式

利用边框绘制

给定一个div, 为其设置宽高和边框

     <div class="triangle"></div>
     
     .triangle {
          width: 20px;
          height: 20px;
          border-top: 20px solid pink;
          border-right: 20px solid blue;
          border-bottom: 20px solid green;
          border-left: 20px solid orange;
     }

效果如下：

可以看到边框实际上是梯形结构相交，当我们把div的宽高设置为0后：

     <div class="triangle"></div>
     
     .triangle {
          width: 0px;
          height: 0px;
          border-top: 20px solid pink;
          border-right: 20px solid blue;
          border-bottom: 20px solid green;
          border-left: 20px solid orange;
     }

效果如下：

边框会填满整个div，其中左右border填满水平，上下border填满垂直

如果不设置下边框，则只展示上半部分：

     <div class="triangle"></div>
     
     .triangle {
         width: 0;
         height: 0;
         border-style: solid;
         border-width: 20px 20px 0 20px; /* 上右下左 */
         border-color: red orange blue pink;
     }

效果如下：

如果不设置左和下两个边框，则只展示1/4

     <div class="triangle"></div>
     
     .triangle {
         width: 0;
         height: 0;
         border-top: 20px solid skyblue;
         border-right: 20px solid orange;
     }

效果如下：

接下来展示三角形，只需将不需要展示的三角形对应的边框颜色设置为transparent即可：

      <div class="triangle"></div>
      
      .triangle {
          width: 0px;
          height: 0px;
          border:20px solid transparent;
          border-left: 20px solid rgb(255, 245, 47);
      }

效果如下：

其他方位三角形均可通过设置边框宽度和颜色实现，这里不一一列举了

其他方法后续时间补充~