如何用CSS制作带黑色边角的3D按钮？拒绝SVG方案

核心思路 #

纯CSS通过3D变换构建按钮的真实立体结构，无需SVG，利用伪元素配合渐变模拟指定位置的黑色边角，通过定位和3D变换让边角完美贴合按钮的立体角度。

代码实现 #

HTML结构 #

保持极简结构，单个按钮元素配合伪元素完成所有效果：

<button class="three-d-btn">3D Button</button>

CSS样式 #

/* 全局3D场景配置 */
body {
  perspective: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f0f0f0;
}

/* 按钮基础样式 */
.three-d-btn {
  position: relative;
  padding: 12px 32px;
  font-size: 18px;
  font-weight: bold;
  background: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  transform-style: preserve-3d;
  transform: rotateX(10deg) rotateY(-10deg);
  transition: transform 0.3s ease;
}

.three-d-btn:hover {
  transform: rotateX(5deg) rotateY(-5deg);
}

/* 右侧立体侧面 */
.three-d-btn::before {
  content: '';
  position: absolute;
  top: 0;
  right: -8px;
  width: 8px;
  height: 100%;
  /* 右上角黑色边角+立体面底色 */
  background: linear-gradient(to bottom, #000 8px, #388E3C 8px);
  transform-style: preserve-3d;
  transform: rotateY(90deg) translateZ(8px);
}

/* 下方立体侧面 */
.three-d-btn::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 8px;
  /* 左下角黑色边角+立体面底色 */
  background: linear-gradient(to right, #000 8px, #2E7D32 8px);
  transform-style: preserve-3d;
  transform: rotateX(-90deg) translateZ(8px);
}

方案说明 #

• 用perspective和transform-style: preserve-3d开启3D空间，替代原有的仿立方体样式，实现真正的立体效果。
• 两个伪元素分别生成按钮的右侧、下方立体面，通过rotateY/rotateX调整角度，translateZ控制立体厚度。
• 利用线性渐变直接在立体面上绘制黑色边角：右侧面顶部8px设为黑色，底部面左侧8px设为黑色，完全贴合3D角度。
• hover时微调旋转角度，增强交互时的立体反馈。

质感优化（可选） #

如果需要更真实的边角质感，可给黑色边角添加细微阴影和深色渐变：

.three-d-btn::before {
  background: linear-gradient(to bottom, #111 8px, #388E3C 8px);
  box-shadow: inset 0 0 2px rgba(0,0,0,0.5);
}

.three-d-btn::after {
  background: linear-gradient(to right, #111 8px, #2E7D32 8px);
  box-shadow: inset 0 0 2px rgba(0,0,0,0.5);
}

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