如何实现多边形边框形状的button按钮，自定义border及border-radius效果

你可以通过CSS的clip-path属性裁切出目标多边形形状，结合伪元素实现外边框效果，无需修改原有HTML结构，修改后的完整代码如下：

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

.p-button{
  position: relative;
  text-decoration: none;
  color: white;
  padding: 15px 50px;
  text-transform: uppercase;
  font-family: "Poppins";
  letter-spacing: 0.5px;
  z-index: 1;
  /* 裁切多边形形状，可自行调整百分比修改切角大小 */
  clip-path: polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%, 0 50%);
  background: #5344c6;
}

/* 伪元素实现外边框 */
.p-button::before {
  content: '';
  position: absolute;
  /* 数值越大边框越粗 */
  inset: -2px;
  /* 自定义边框颜色 */
  background: #7a6cef;
  z-index: -1;
  clip-path: polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%, 0 50%);
}

body{
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

<a class="p-button" href="">Explore The Tech</a>

参数调整说明：

• 修改clip-path: polygon()内的百分比数值，即可调整多边形切角的倾斜角度
• 修改inset属性的数值，即可调整外边框的粗细
• 修改.p-button::before的background属性值，即可自定义边框颜色

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