如何实现符合指定设计要求的斜切边渐变动态宽度按钮

实现思路 #

• 用不对称border-radius实现斜切边效果，四个角分别设置圆角满足设计要求
• 直接复用设计师提供的渐变背景、阴影参数，1:1匹配设计稿
• 固定高度、设置最小宽度+内边距，实现宽度随内容动态调整

完整代码 #

HTML结构 #

<button class="btn btn-slant-left">确认</button>
<button class="btn btn-slant-right">取消</button>

CSS样式 #

/* 按钮公共样式 */
.btn {
  height: 48px;
  min-width: 120px; /* 可根据需求调整最小宽度 */
  padding: 0 32px; /* 左右内边距，内容增多时自动撑宽按钮 */
  border: none;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 左侧斜切蓝色按钮 */
.btn-slant-left {
  background: linear-gradient(317deg, #0099EE 0%, #0077EE 100%);
  box-shadow: 0px 3px 0px 0px #0482CC, 0px 2px 4px 0px rgba(10, 127, 238, 0.3);
  border-radius: 100px 4px 4px 100px;
}
.btn-slant-left:hover {
  transform: translateY(1px);
  box-shadow: 0px 2px 0px 0px #0482CC, 0px 1px 3px 0px rgba(10, 127, 238, 0.3);
}

/* 右侧斜切橙色按钮 */
.btn-slant-right {
  background: linear-gradient(133deg, #FD7F5A 0%, #F53841 100%);
  box-shadow: 0px 3px 0px 0px #C63A38, 0px 2px 4px 0px rgba(255, 71, 0, 0.3);
  border-radius: 4px 100px 100px 4px;
}
.btn-slant-right:hover {
  transform: translateY(1px);
  box-shadow: 0px 2px 0px 0px #C63A38, 0px 1px 3px 0px rgba(255, 71, 0, 0.3);
}

效果说明 #

• 斜切边：通过border-radius的100px大圆角和4px小圆角搭配，实现单侧斜切的视觉效果，四个角均设置了圆角值符合要求
• 阴影效果：完全复用设计师提供的两层阴影参数，实现底部实色阴影+右侧半透明扩散阴影
• 宽度适配：取消固定宽度设置，改为最小宽度+左右内边距，按钮内容增加时会自动撑开宽度，满足动态调整需求
• 渐变背景：直接使用设计师提供的渐变角度和色值，还原设计效果

内容的提问来源于stack exchange，提问作者斯特切