如何实现可折叠斜角侧边栏菜单的CSS样式设计？

基础样式与宽形态配置 #

通过clip-path属性实现顶部和底部的斜角效果，斜线从宽度约78%的位置（靠近边缘）起始，适配宽形态需求：

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 280px;
  height: 100vh;
  background-color: #2d3748; /* 可按需替换背景色 */
  clip-path: polygon(0 0, 78% 0, 100% 25px, 100% calc(100% - 25px), 78% 100%, 0 100%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-content {
  padding: 20px;
  padding-right: 50px; /* 避免内容被右侧斜角遮挡 */
  height: 100%;
  box-sizing: border-box;
  color: #fff;
}

窄形态折叠样式 #

添加is-collapsed类切换到窄形态，调整宽度和clip-path参数，让斜线更贴近边缘：

.sidebar.is-collapsed {
  width: 80px;
  clip-path: polygon(0 0, 90% 0, 100% 15px, 100% calc(100% - 15px), 90% 100%, 0 100%);
}

.sidebar.is-collapsed .sidebar-content {
  padding-right: 25px; /* 适配窄形态内边距 */
  text-align: center; /* 窄形态下内容居中 */
}

/* 可选：窄形态下隐藏文字，仅保留图标 */
.sidebar.is-collapsed .sidebar-content ul li span {
  display: none;
}

折叠切换逻辑（纯JS实现） #

配合简单JS完成宽/窄形态的切换交互：

const collapseBtn = document.querySelector('.collapse-btn');
const sidebar = document.querySelector('.sidebar');

collapseBtn.addEventListener('click', () => {
  sidebar.classList.toggle('is-collapsed');
  collapseBtn.textContent = sidebar.classList.contains('is-collapsed') ? '展开' : '折叠';
});

关键说明 #

• clip-path: polygon()是实现斜角的核心：
  • 第二个、第五个参数（如78% 0、78% 100%）控制斜线的横向起始位置，数值越大越靠近侧边栏边缘
  • 第三个、第四个参数（如100% 25px、100% calc(100% - 25px)）控制斜线的纵向端点，调整像素值可改变倾斜角度
• transition属性确保形态切换时的平滑过渡
• 内边距调整是为了避免菜单内容被斜角区域遮挡

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