纯CSS实现三角形

[goldEli]

Go Back

[goldEli]

大体思路：

1. 创建一个 div，宽高相等，再单独设置上下左右的 border

2. 将 div 的宽高设为 0

3. 将上左右的 border 颜色设置成 transparent，就得到一个向上的三角形了

代码如下：

    .triangle_to_top{
      width: 0; 
      height: 0; 
      border-top: 10px solid transparent;
      border-bottom: 10px solid blue;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
    }
    .triangle_to_left{
      width: 0; 
      height: 0; 
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-right: 10px solid red;
    }
    .triangle_to_right{
      width: 0; 
      height: 0; 
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;

      border-left: 10px solid green;
    }
    .triangle_to_bottom{
      width: 0; 
      height: 0; 
      border-top: 10px solid brown;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
    }

    <div class="triangle_to_top"></div>
    <div class="triangle_to_right"></div>
    <div class="triangle_to_bottom"></div>
    <div class="triangle_to_left"></div>

Reference: CSS Triangle