Elementor按钮切角样式实现求助：自定义CSS无效问题

操作步骤 #

1. 在Elementor编辑器中选中目标按钮，切换到「高级」选项卡。
2. 找到「自定义CSS」输入框，粘贴以下代码并根据需求调整参数：

.elementor-button {
  /* 左上、右下切角20px，可修改数值调整切角大小 */
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  /* 适配设计的基础样式，可按需修改 */
  padding: 12px 28px;
  background-color: #2563eb;
  color: #ffffff;
  border: none;
  transition: background-color 0.3s ease;
}

/* 鼠标悬浮状态保持切角，同步调整背景色 */
.elementor-button:hover {
  background-color: #1d4ed8;
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}

参数说明 #

• clip-path：通过多边形坐标定义切角形状，其中的20px是切角的长度，数值越大切角越明显。
• 若需要右上、左下切角，替换clip-path值为：

  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
  

• 若按钮原有边框，必须添加border: none，否则边框会超出切角范围破坏样式。

完成代码粘贴后，点击「更新」即可在前端看到切角按钮效果。

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