使用CSS实现列表项末尾的响应式镂空三角效果

核心思路 #

• 利用<li>的:before伪元素制作三角（<a>的:after已用于下划线效果）
• 通过Flex布局让侧边栏与内容面板高度对齐，确保三角精准衔接
• 镂空效果通过让三角颜色与侧边栏背景色一致实现，视觉上和右侧面板形成连通

修改后的完整代码 #

HTML（仅新增布局容器） #

<div class="content-container">
  <div class="content-links">
    <ul>
      <li>
        <a href="#">Festivals</a>
      </li>
      <li>
        <a href="#">Events</a>
      </li>
      <li>
        <a href="#">Concerts</a>
      </li>
    </ul>
  </div>

  <div class="content-panel"></div>
</div>

CSS（关键修改标注） #

/* 新增容器实现Flex并排布局，强制高度一致 */
.content-container {
  display: flex;
  min-height: 100vh;
}

.content-links {
  width: 25%;
  background-color: #fafafa;
  padding-left: 5.6rem;
  padding-top: 8rem;
  min-height: 100vh;
}

.content-links ul li {
  margin-bottom: 32px;
  position: relative; /* 三角的定位基准 */
  padding-right: 20px; /* 给三角预留空间，避免覆盖文字 */
}

.content-links li {
  list-style: none;
}

.content-links a {
  text-decoration: none;
  font-size: 16px;
  line-height: 24px;
  color: #000;
}

/* 原有下划线效果保留，优化content为空更规范 */
li a:after {
  z-index: 1;
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '';
  background: black;
  height: 3px;
}

li a {
  position: relative;
}

li a:hover {
  color: green;
  font-weight: 600;
}

li a:hover:after,
li a:active:after {
  transition: all 0.2s;
  width: 100%;
}

/* 核心：实现悬停/激活状态的镂空三角 */
li:hover:before,
li.active:before {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  /* 三角尺寸可根据需求调整 */
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  /* 边框颜色与侧边栏背景一致，形成"镂空"视觉 */
  border-left: 12px solid #fafafa;
  z-index: 2; /* 确保三角在内容面板上方 */
}

.content-panel {
  flex: 1; /* 占据剩余宽度 */
  background-color: red;
  min-height: 100vh;
}

关键细节说明 #

• 布局对齐：Flex容器强制侧边栏和面板高度一致，避免三角因高度差错位
• 三角居中：通过transform: translateY(-50%)让三角与文字垂直居中对齐
• 镂空逻辑：三角左侧边框颜色与侧边栏背景色完全匹配，视觉上呈现侧边栏"挖洞"效果，与右侧红色面板自然衔接
• 响应式适配：基于百分比和Flex布局，调整尺寸时三角会自动跟随<li>位置变化，无需额外媒体查询

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