如何为按钮制作类似示例中的边角装饰？

要实现目标按钮的边角装饰效果，核心是利用相对定位配合伪元素绝对定位，通过边框绘制边角线条。以下是具体实现思路和调整后的代码：

基础双边角实现 #

给按钮设置相对定位，用::before和::after分别实现左上角、右下角的装饰：

.btn {
  position: relative;
  padding: 12px 32px;
  background: #fff;
  border: 0;
  font-size: 16px;
  cursor: pointer;
  overflow: visible; /* 防止伪元素被按钮裁剪 */
}

.btn::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 14px;
  height: 14px;
  border-top: 2px solid #222;
  border-left: 2px solid #222;
}

.btn::after {
  content: '';
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 14px;
  height: 14px;
  border-bottom: 2px solid #222;
  border-right: 2px solid #222;
}

完整四边角实现 #

如果需要四个边角都有装饰，可以给按钮套一层容器，利用容器和按钮的伪元素分别实现两组边角：

<div class="btn-container">
  <button class="btn">点击按钮</button>
</div>

.btn-container {
  position: relative;
  display: inline-block;
}

.btn {
  position: relative;
  padding: 12px 32px;
  background: #fff;
  border: 0;
  font-size: 16px;
  cursor: pointer;
}

/* 容器伪元素：左上角 + 右下角 */
.btn-container::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 14px;
  height: 14px;
  border-top: 2px solid #222;
  border-left: 2px solid #222;
}

.btn-container::after {
  content: '';
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 14px;
  height: 14px;
  border-bottom: 2px solid #222;
  border-right: 2px solid #222;
}

/* 按钮伪元素：右上角 + 左下角 */
.btn::before {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 14px;
  height: 14px;
  border-top: 2px solid #222;
  border-right: 2px solid #222;
}

.btn::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 14px;
  height: 14px;
  border-bottom: 2px solid #222;
  border-left: 2px solid #222;
}

常见问题修复 #

• 伪元素必须设置content: ''，否则不会被渲染
• 确保父元素（按钮/容器）设置position: relative，让伪元素的绝对定位基于它
• 若伪元素被按钮背景遮挡，可调整伪元素的z-index（如设为-1）
• 若边角被裁剪，给父元素添加overflow: visible

内容的提问来源于stack exchange，提问作者Артём Лысянский