如何实现菜单自定义异形按钮效果附现有CSS与HTML实现代码

AI 小北

2026-10-11

解决方案

核心修改逻辑如下：

对transform: skewY()属性作用范围做矫正：父元素倾斜后，内部文字会同步倾斜，需要给文字设置反向的skewY抵消倾斜效果，保证文字水平显示
统一按钮的尺寸、边距、对齐规则，避免按钮错位
调整菜单容器的内边距，适配倾斜后按钮的视觉偏移

修改后完整代码

HTML

<body>
  <div class="container">
    <div class="menu">
      <button class="first">
        <span>Start</span>
      </button>
      <button class="numbers">
        <span>1</span>
      </button>
      <button class="numbers">
        <span>2</span>
      </button>
    </div>
    <div class="content">
    </div>
  </div>
</body>

CSS

body {
  margin: 0;
}
.container {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.menu {
  background: lightgray;
  flex: 0.1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 0 0 15px;
  overflow: visible;
}

.menu button {
  border: none;
  height: 50px;
  text-align: center;
  cursor: pointer;
  transform: skewY(10deg);
  background: transparent;
  position: relative;
  overflow: hidden;
}
/* 矫正文字倾斜 */
.menu button span {
  display: inline-block;
  transform: skewY(-10deg);
}
.numbers { 
  background: #79726c;
  color: #fff;
}
/* 可选：选中态效果 */
.numbers.active {
  background: #d87b4a;
}
.first {
  background: #d87b4a;
  color: #fff;
}
.content {
  flex: 1;
  background: blue;
}