CSS如何实现一个三角形呢？

一，给一个盒子加边框：

<div class="box"></div>

css代码如下：

• <style>

      .box {

        width: 0;

        height: 0;

        border: 100px solid;

        border-color: orangered skyblue gold yellowgreen;

      }

    </style>

• 

   

---

二，第二步，我们把盒子的宽度都设置为0：

 

代码如下： 

<style>

    .box {

      margin: 0 auto;

      width: 0px;

      height: 0px;

      border-left: 173.2px solid pink;

      border-top: 100px solid rgb(185, 185, 209);

      border-right: 173.2px solid rgb(184, 202, 184);

      border-bottom: 100px solid rgb(203, 130, 130);

    }

  </style>

三，最后一步，只需把其他三个边颜色设置为透明即可：

    .box {

      margin: 0 auto;

      width: 0px;

      height: 0px;

      border-left: 173.2px solid transparent;

      border-top: 100px solid transparent;

      border-right: 173.2px solid rgb(236, 197, 203);

      border-bottom: 100px solid transparent;

    }