如何为带箭头区块中的三角形添加内部边框？

嘿，我懂你要做的是给那个带箭头的区块加上三角形内部的边框效果对吧？你的现有代码已经做出了紫色的实心箭头，但还缺边框质感。这里有两个实用的方案，你可以根据需求选：

方案一：双伪元素叠加（最精准可控） #

这个方法适合纯色背景的区块，通过两个伪元素模拟出箭头的边框效果：

* { box-sizing: border-box; } 
.block-arr { 
  background: purple; 
  margin: 20px; 
  margin-right: 100px; 
  position: relative;
  border: 2px solid #000; /* 给主区块加统一边框 */
  border-right: none; /* 去掉右边框，让箭头和区块无缝衔接 */
} 
.block-arr .inner { 
  min-height: 100px; 
  display: flex; 
  padding: 20px; 
  align-items: center; 
  position: relative; 
} 

/* 外层伪元素：生成边框颜色的大箭头 */
.block-arr .inner:after { 
  border-top: 50px solid transparent; 
  border-bottom: 50px solid transparent; 
  border-left: 50px solid #000; 
  content: ''; 
  position: absolute; 
  left: 100%; 
  top: 0; 
}

/* 内层伪元素：生成和区块同色的小箭头，覆盖在外层箭头内侧 */
.block-arr .inner:before {
  border-top: 48px solid transparent; /* 尺寸比外层小2px，对应边框宽度 */
  border-bottom: 48px solid transparent;
  border-left: 48px solid purple; 
  content: '';
  position: absolute;
  left: 100%;
  top: 1px; /* 偏移1px，完美对齐边框 */
}

原理说明 #

• 用:after做一个黑色的大箭头（和区块边框同色），作为箭头的“边框”部分；
• 用:before做一个紫色的小箭头（和区块背景色一致），叠在大箭头上面，只露出大箭头的边缘，看起来就像箭头有了边框；
• 主区块去掉右边框，让箭头和区块衔接更自然。

方案二：利用drop-shadow快速实现（适合非纯色背景） #

如果你的区块背景是渐变或者半透明的，双伪元素方法就不适用了，可以试试CSS的filter: drop-shadow：

* { box-sizing: border-box; } 
.block-arr { 
  background: purple; 
  margin: 20px; 
  margin-right: 100px; 
  position: relative;
  border: 2px solid #000;
} 
.block-arr .inner { 
  min-height: 100px; 
  display: flex; 
  padding: 20px; 
  align-items: center; 
  position: relative;
  filter: drop-shadow(2px 0 0 #000); /* 给inner加右侧阴影，箭头也会带上阴影 */
} 
.block-arr .inner:after { 
  border-top: 50px solid transparent; 
  border-bottom: 50px solid transparent; 
  border-left: 50px solid purple; 
  content: ''; 
  position: absolute; 
  left: 100%; 
  top: 0;
}

注意事项 #

这个方法的优点是适配复杂背景，但阴影会有轻微模糊感，如果需要绝对清晰的边框，还是优先选方案一。

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