如何为CSS绘制的自定义箭头形状添加黑色(#000)边框

解决方案 #

这里提供两种实现方案，你可以根据需求选择：

方案1：filter 方案（推荐，无需修改原有结构）

利用 drop-shadow 可以识别元素不规则可见形状的特性，直接生成全边框，仅需要给箭头类新增一行样式即可：

.arrow-pointer {
  /* 原有代码全部保留，新增以下属性 */
  filter: drop-shadow(1px 0 0 #000) 
          drop-shadow(-1px 0 0 #000) 
          drop-shadow(0 1px 0 #000) 
          drop-shadow(0 -1px 0 #000);
}

如果需要调整边框粗细，只需要对应修改阴影的偏移值即可，比如要2px边框就把偏移值改成2，再补充斜向的阴影避免缺角。

方案2：伪元素叠加方案（兼容性更好）

通过叠加一层稍大的黑色三角形作为边框层，再叠原来的填充色三角形实现边框效果，修改后的完整CSS代码如下：

.arrow-pointer {
  width: 150px;
  height: 50px;
  background: #32557f;
  position: relative;
  margin-left: 25px;
  color: #fff;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  box-sizing: border-box;
}

/* 左边凹口边框层 */
.arrow-pointer:after {
  content: '';
  position: absolute;
  left: -1px;
  top: -1px;
  width: 0;
  height: 0;
  border-left: 26px solid #000;
  border-top: 26px solid transparent;
  border-bottom: 26px solid transparent;
  z-index: 1;
}
/* 左边凹口白色填充层 */
.arrow-pointer .left-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-left: 25px solid #fff;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  z-index: 2;
}

/* 右边凸尖边框层 */
.arrow-pointer:before {
  content: '';
  position: absolute;
  right: -26px;
  top: -1px;
  width: 0;
  height: 0;
  border-left: 26px solid #000;
  border-top: 26px solid transparent;
  border-bottom: 26px solid transparent;
  z-index: 1;
}
/* 右边凸尖蓝色填充层 */
.arrow-pointer .right-fill {
  position: absolute;
  right: -25px;
  top: 0;
  width: 0;
  height: 0;
  border-left: 25px solid #32557f;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  z-index: 2;
}

对应的HTML需要新增两个填充用的空元素：

<div style="display:flex">
  <div class="arrow-pointer">
    <span class="left-fill"></span>
    <span class="right-fill"></span>
  </div>
  <div class="arrow-pointer">
    <span class="left-fill"></span>
    <span class="right-fill"></span>
  </div>
</div>

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