<i class="layui-layer-TipsG layui-layer-TipsB" ></i> 如何用css修改为一个带阴影的上三角

可以使用CSS伪元素和一些基本的CSS属性来创建一个带阴影的上三角形状。以下是一个示例代码：

.arrow-up {
  position: relative;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ccc;
}

.arrow-up:before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid rgba(0, 0, 0, 0.2);
}

这将创建一个带有灰色填充和黑色阴影的上三角形状。您可以调整边框宽度、填充颜色和阴影颜色来满足您的需求。

相关问题

<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` 元素结构进行修改的，具体应用时可能需要根据实际情况进行调整。

// 监听页面点击事件 window.addEventListener('click', function (event) { // 判断用户点击的元素是否是提示框的目标元素 if (!event.target.matches('.layui-layer-tips')) { // 如果不是，则关闭当前打开的提示框 layer.closeAll('tips'); } }); $('#Tips').on("click", function () { let html = ''; html += "<div class='Tips_boxs'><div class='Tips_box_dot'></div><div>合并列中的字段，无法拖入表格,需选中表格内区域，手动进行绑定</div></div>"; html += "<div class='Tips_boxs'><div class='Tips_box_dot'></div><div>非合并单元格，可通过右下方”字段列表“，拖入到表格内</div></div>"; layer.tips(html, '#Tips', { tips: 3, }); $(".layui-layer-tips .layui-layer-content").attr({'style': "left: 29%;font-size: 14px !important;min-height: 120px !important;color: rgba(0, 0, 0, 0.8);background-color:#fff;padding:20px !important"}) $(".layui-layer-TipsG.layui-layer-TipsB").attr({'style': " right: 12px;left: auto;width: 0;top: -13px !important;left: 65% !important;height: 0;border-left: 7px solid transparent;border-right: 7px solid transparent;border-bottom: 7px solid black;transform: rotate(0deg) !important;"}) }) 这个方法被立即关闭了

根据你提供的代码，可能是因为你在点击 `#Tips` 元素时弹出了一个 layer.tips 提示框，但是在点击页面空白处时立即关闭了这个提示框，导致看上去这个方法没有生效。

如果你想让这个方法正常工作，可以将 `window.addEventListener` 中的判断逻辑更改为判断当前页面是否有打开的提示框。例如：

// 监听页面点击事件
window.addEventListener('click', function(event) {
  // 判断当前页面是否有打开的提示框
  if (document.querySelector('.layui-layer-tips')) {
    // 如果有，则关闭当前打开的提示框
    layer.closeAll('tips');
  }
});

这样，当你在点击 `#Tips` 元素时弹出提示框，然后点击页面空白处时才会触发上面的事件监听器关闭提示框。