1. 宽度高度固定：如下图所示

    1. <style>
    2.  .triangle {
    3.    width: 100px;
    4.    height: 100px;
    5.    border: 100px solid;
    6.    border-top-color: red;
    7.    border-left-color: skyblue;
    8.    border-right-color: darkblue;
    9.    border-bottom-color: green;
    10.  }
    11. </style>
    12. </head>
    13. <body>
    14. <div class="triangle">
    15. </div>
    16. </body>

    image.png

  2. 将宽度高度设置为0；

image.png

画法：

  1. 左侧三角形：

将border设置为transparent； 想要设置哪一侧三角形， 就设置哪一侧颜色；对头设置为border-xx: 0;

  1. <style>
  2.     .triangle {
  3.       width: 0;
  4.       height: 0;
  5.       border: 100px solid transparent;
  6.       border-left-color: red;
  7.       border-right: 0;
  8.     }
  9.   </style>
  10. </head>
  11. <body>
  12.   <div class="triangle">
  13.   </div>
  14. </body>

image.png