css实现三角形

设置border属性实现

实现思路: 将盒子的宽高都设置为0, 再通过设置border-top等属性来实现

<style>
    #app{
      width: 0px;
      height: 0px;
      border-bottom: 100px solid blue;
      border-left: 50px solid green;
      border-right: 50px solid gray;
      margin: 20px;
    }
    #app1{
      width: 0px;
      height: 0px;
      border-top: 100px solid blue;
      border-left: 50px solid green;
      border-right: 50px solid gray;
      margin: 20px;
    }
    #app2{
      width: 0px;
      height: 0px;
      border-left: 100px solid blue;
      border-top: 50px solid green;
      border-bottom: 50px solid gray;
      margin: 20px;
    }
    #app3{
      width: 0px;
      height: 0px;
      border-right: 100px solid blue;
      border-top: 50px solid green;
      border-bottom: 50px solid gray;
      margin: 20px;
    }
  </style>
  <div id="app"></div>
  <div id="app1"></div>
  <div id="app2"></div>
  <div id="app3"></div>

通过设置不同的border边,就可以实现不同朝向的三角形,而设置不同的border宽度就可以实现不同形状的三角形