HTML 代码示例:
CSS 代码示例:
.polygon-button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; /* 设置围绕按钮的多边形边框 / clip-path: polygon( 0 0, / 左上 / 100% 0, / 右上 / 100% 100%, / 右下 / 0 calc(100% - 20px) / 左下(留20像素做圆角) / ); / 设置多边形边框半径 */ border-radius: 10px; }
通过clip-path属性,我们可以使用多边形边框来覆盖按钮。这里,我们创建了一个四边形,然后用一个函数为其添加了圆角。这个函数需要在CSS中手动编写,且需要很多调整和实验来让多边形和圆角达到期望的效果。
但是,使用这个方法可以创建非常独特和个性化的按钮,即使每个按钮看起来非常可定制和独特,clip-path不会对性能造成影响。
最后,我们使用border-radius属性来添加圆角并完善按钮的外观。