如何移除伪元素after内容中箭头标记的底部部分？

AI 小北

2026-5-15

解决CSS箭头底部多余部分的问题

你的问题出在伪元素的边框设置和阴影方式上——当前写法会让伪元素呈现旋转后的菱形，多余的边框区域就是你说的“底部外观不佳”的部分，直接给伪元素加box-shadow还会放大这个问题。下面是具体的修复方案：

修复后的完整代码

body{ background:#fff; }
.triangle {
  position: relative;
  margin: 3em;
  padding: 1em;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0px 0 5px 0 rgba(0, 0, 0, 0.4);
  border-radius:5px;
}
.triangle::after{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: -0.75em; /* 调整位置让箭头刚好贴合容器顶部 */
  right: 1%;
  box-sizing: border-box;
  /* 直接生成三角形：三个方向边框透明，仅保留底部边框颜色 */
  border: 0.75em solid transparent;
  border-bottom-color: #fff;
  /* 用drop-shadow替代box-shadow，仅跟随箭头形状加阴影 */
  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, .5));
}

<div class="triangle">This is a CSS3 triangle with a proper box-shadow!</div>

关键修改点说明

调整边框生成逻辑：不再用正方形旋转的方式造箭头，而是直接通过border属性生成三角形——设置三个方向边框为透明，只保留需要的方向（这里是border-bottom-color），彻底消除多余的边框部分。
修正定位参数：把top值从0改为-0.75em，让箭头刚好贴合容器顶部，避免间隙或重叠。
替换阴影实现方式：用filter: drop-shadow()代替box-shadow，因为box-shadow是给伪元素的整个边界（原正方形/菱形）加阴影，而drop-shadow会跟随箭头的实际形状添加阴影，效果更自然。