<i class="layui-layer-TipsG layui-layer-TipsB" style="right: 12px;left: auto;width: 0;top: -13px !important;left: 48% !important;height: 0;border-left: 7px solid transparent;border-right: 7px solid transparent;border-bottom: 7px solid black;transform: rotate(0deg) !important;"></i> 将三角左右添加投影

可以通过在三角形的 `::before` 和 `::after` 伪元素上再添加一对投影元素，来实现左右投影效果。具体代码如下：

.triangle {
  position: relative;
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 30px solid #000;
}

.triangle::before {
  content: "";
  position: absolute;
  top: -30px;
  left: -30px;
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 30px solid rgba(0, 0, 0, 0.3);
}

.triangle::after {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 30px solid rgba(0, 0, 0, 0.3);
}

/* 左投影 */
.triangle::before::before {
  content: "";
  position: absolute;
  top: 0;
  left: -7px;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 7px solid rgba(0, 0, 0, 0.1);
}

/* 右投影 */
.triangle::after::before {
  content: "";
  position: absolute;
  top: 0;
  right: -7px;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 7px solid rgba(0, 0, 0, 0.1);
}

将上述代码应用到 `<i>` 元素上，即可得到一个带左右投影的上三角形状。需要注意的是，这里的代码是基于你提供的 `i` 元素结构进行修改的，具体应用时可能需要根据实际情况进行调整。