如何用CSS通过矩形和三角形制作指定箭头并消除多余边框

嘿，我来帮你搞定这个箭头的问题！你想要实现的是带有右侧箭头的白色边框盒子，但目前遇到了箭头三角形上多余边框无法去除的问题，咱们调整一下代码就能完美解决～

先看一下第一种方案（分层实现，效果最精准）：

#arrowbox {
  width: 200px;
  height: 50px;
  background-color: white;
  margin-left: 100px;
  margin-top: 100px;
  position: relative;
  /* 明确设置盒子边框，去掉右侧边框避免多余线条 */
  border: 2px solid black;
  border-right: none;
}

#arrowbox:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  /* 白色箭头填充，和盒子背景保持一致 */
  border: 25px solid transparent;
  border-left-color: white;
}

#arrowbox:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  /* 黑色箭头边框，尺寸比白色填充大2px（对应盒子边框宽度） */
  border: 27px solid transparent;
  border-left-color: black;
  /* 把边框层放在填充层下面，形成自然的边框效果 */
  z-index: -1;
}

<div id="arrowbox"></div>

问题根源和优化说明 #

• 解决多余边框：你原来的代码里盒子保留了右侧边框，这就导致箭头和盒子之间多出一条竖线（也就是你说的第三边的边框），去掉右侧边框就能彻底解决这个问题。
• 分层实现更自然：用:before做箭头的黑色边框，:after做白色填充，两者的尺寸差刚好匹配盒子的边框宽度，让箭头和盒子的边框完美衔接，看起来是一个整体。
• 垂直居中更稳妥：用top: 50% + transform: translateY(-50%)的方式，比你原来的margin-top适配性更强，不管盒子高度怎么调整，箭头都能保持垂直居中。

如果你想要更简洁的代码，也可以用单伪元素+阴影的方案：

#arrowbox {
  width: 200px;
  height: 50px;
  background-color: white;
  margin-left: 100px;
  margin-top: 100px;
  position: relative;
  border: 2px solid black;
}

#arrowbox:after {
  content: "";
  position: absolute;
  top: calc(50% - 25px);
  left: 100%;
  /* 白色箭头填充 */
  border: 25px solid transparent;
  border-left-color: white;
  /* 用阴影模拟箭头的黑色边框，刚好和盒子右侧边框衔接 */
  box-shadow: -2px 0 0 black;
}

这个方案用box-shadow给箭头加一条左侧的黑色边框，代码更短，效果也能达到要求～

内容的提问来源于stack exchange，提问作者Naveen Singh rajput