如何用CSS为箭头添加轮廓？解决轮廓仅包围容器问题

问题根源是outline基于元素未变换的原始盒模型绘制，不会跟随transform: rotate()一起旋转，所以才会出现outline围着容器盒子转，而不是贴合箭头形状的情况。下面是两种实用的修复方案：

方案一：用box-shadow替代outline #

box-shadow会跟着元素的变换（比如旋转）生效，完美贴合箭头轮廓，这是最简便的解法：

.arrows {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}

.arrow {
  border: solid #49fb35;
  border-width: 0 10px 10px 0;
  display: inline-block;
  padding: 25px;
  /* 用box-shadow模拟outline效果：0偏移、0模糊、3px扩展（对应outline宽度）、黑色 */
  box-shadow: 0 0 0 3px black;
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

方案二：用clip-path裁剪盒模型适配箭头 #

如果一定要用outline，可以通过clip-path把元素的盒模型裁剪成箭头形状，让outline贴合裁剪后的轮廓：

.arrows {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}

.arrow {
  border: solid #49fb35;
  border-width: 0 10px 10px 0;
  display: inline-block;
  padding: 25px;
  outline: solid black 3px;
  /* 裁剪出匹配箭头的多边形，旋转后刚好贴合箭头形状 */
  clip-path: polygon(0 100%, 100% 100%, 100% 0);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

补充说明 #

• 方案一兼容性拉满，几乎所有现代浏览器都支持，推荐优先使用。
• 方案二需要手动调整clip-path的路径参数，适合必须保留outline属性的场景，注意旧版浏览器可能存在兼容性问题。

内容的提问来源于stack exchange，提问作者Blind Sanji