如何实现激活项仅三边带边框且主右侧边框动态中断的菜单

需求 #

• 菜单容器右侧显示主垂直边框
• 激活状态的菜单项显示上、下、左边框，右侧无框
• 主垂直边框需在激活项的位置自动中断，且支持任意菜单项切换为激活状态（不能硬编码中断位置）

效果示意图 #

解决方案代码 #

核心思路是利用负边距让激活项覆盖容器的右侧边框，配合背景色实现中断效果，完全支持动态切换激活项：

CSS 代码

.container {
  border-right: 1px solid #000; /* 主垂直边框 */
  width: 200px;
  padding-top: 20px;
  padding-bottom: 20px;
  background: #fff; /* 需与页面背景色一致 */
}

.item {
  padding: 10px;
}

.active {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  margin-right: -1px; /* 向右偏移1px，覆盖容器右侧边框 */
  background: #fff; /* 用背景色盖住被覆盖的边框区域 */
}

HTML 代码

<div class="container">
  <div class="item active">
    Test1
  </div>
  <div class="item">
    Test2
  </div>
  <div class="item">
    Test3
  </div>
</div>

原理说明 #

• margin-right: -1px 让激活项超出容器右侧1px，刚好对齐并覆盖容器的右侧边框
• 相同的背景色确保激活项覆盖区域不会透出容器的边框
• 无论哪个菜单项添加active类，都会自动触发边框中断效果，无需针对特定位置写死样式

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