如何为Vue中Bulma CSS的is-boxed样式Tabs实现斜角边框

你之前直接给a标签加skew变换的做法，会导致整个标签倾斜，相邻标签的边框没法被正确覆盖，还得给文字反向修正，容易出现布局错位。下面是更靠谱的实现方案——用伪元素构建斜角边框，同时搞定相邻标签的覆盖问题：

修改后的CSS代码 #

/* 重置激活标签的默认样式 */
.tabs.is-boxed li.is-active a {
  border: none;
  position: relative;
  z-index: 2; /* 确保激活标签在相邻标签上方 */
  background-color: #fff; /* 匹配你的页面背景色，避免透底 */
  /* 调整内边距，给斜角伪元素留出空间 */
  padding-left: calc(0.75em + 10px);
  padding-right: calc(0.75em + 10px);
}

/* 构建左侧斜角边框 */
.tabs.is-boxed li.is-active a::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -10px;
  width: 10px;
  background-color: #fff;
  transform: skew(20deg);
  /* 匹配Bulma默认激活态的边框色，可自定义 */
  border-top: 3px solid #00d1b2;
  border-right: 1px solid #00d1b2;
}

/* 构建右侧斜角边框 */
.tabs.is-boxed li.is-active a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -10px;
  width: 10px;
  background-color: #fff;
  transform: skew(-20deg);
  border-top: 3px solid #00d1b2;
  border-left: 1px solid #00d1b2;
}

/* 处理首尾激活标签的特殊情况（可选） */
.tabs.is-boxed li:first-child.is-active a::before {
  display: none; /* 第一个标签激活时，隐藏左侧斜角 */
}

.tabs.is-boxed li:last-child.is-active a::after {
  display: none; /* 最后一个标签激活时，隐藏右侧斜角 */
}

方案说明 #

• 伪元素构建斜角：通过::before和::after伪元素分别创建左右斜角，不用直接变换整个标签元素，文字布局保持正常，无需反向修正。
• 层级覆盖：给激活标签设置z-index:2，确保斜角伪元素能盖住相邻标签的边框，解决中间标签激活时的边框重叠问题。
• 内边距调整：增加左右内边距，避免文字被伪元素遮挡，保证标签内容的可读性。
• 首尾标签适配：可选隐藏首尾激活标签的外侧斜角，让样式更贴合容器边缘。

你可以根据需求调整斜角宽度（width值）、倾斜角度（skew度数）以及边框颜色，匹配自己的设计风格。

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