实现不用方向的三角形可根据border进行设置。具体代码如下：

.triangle-up {
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid black;
    }
    .triangle-right {
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-left: 10px solid transparent;
      border-right: 10px solid black;
      border-bottom: 10px solid transparent;
    }
    .triangle-down {
      width: 0;
      height: 0;
      border-top: 10px solid black;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid transparent;
    }
    .triangle-left {
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-left: 10px solid black;
      border-right: 10px solid transparent;
      border-bottom: 10px solid transparent;
    }