css3实现三角形（上下左右）

很实用,先收藏着

第一步：新建一个div。

<div class="triangle">添加三角形</div>
    .triangle {
      width: 200px;
      height: 40px;
      position: absolute;
      background: #2b2b2b;
      color: #fff;
    }

第二步：为盒子添加样式。

1.向上

    .triangle:before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 100%;
      width: 0;
      height: 0;
      border-right: 20px solid transparent;
      border-left: 20px solid transparent;
      border-bottom: 20px solid #2b2b2b;
    }

2.向下

.triangle:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    width: 0;
    height: 0;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
    border-top: 20px solid #2b2b2b;
}

3.向左

.triangle:before {
    content: "";
    position: absolute;
    left: -20px;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid #2b2b2b;
}

4.向右

    content: "";
    position: absolute;
    right: -20px;
    top: 0;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #2b2b2b;