如何创建带有自定义颜色边角的按钮？

目标效果：

你当前的伪元素只是添加了小方块边框，没法实现斜角效果。可以通过调整伪元素的边框显示、旋转角度和定位来达成需求，具体代码如下：

HTML结构 #

<button class="button">按钮文本</button>

CSS样式 #

.button {
  position: relative;
  padding: 12px 24px;
  background-color: #2b2b2b; /* 匹配图中按钮底色 */
  color: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
  overflow: hidden; /* 避免伪元素超出按钮范围 */
}

.button::before, .button::after {
  content: "";
  position: absolute;
  width: 18px; /* 控制斜角的长度，可按需调整 */
  height: 18px;
  border: 1px solid #fff;
  transform: rotate(45deg);
}

/* 右上角斜角 */
.button::before {
  top: -9px; /* 偏移量为宽高的一半，让斜角刚好对齐按钮边角 */
  right: -9px;
  border-left: none;
  border-bottom: none;
}

/* 左下角斜角 */
.button::after {
  bottom: -9px;
  left: -9px;
  border-top: none;
  border-right: none;
}

调整说明 #

• 若要改变斜角的长短，只要同步修改伪元素的width/height和对应的偏移量（保持为宽高的一半即可）
• 可以根据按钮的实际尺寸、边框粗细微调数值，让斜角完全贴合按钮边角

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