效果如下图所示
主要是使用了clip-path,代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>不规则多边形按钮</title><style>.polygon-button {width: 351px;height: 317px;background-color: #4CAF50; /* 按钮颜色 */clip-path: polygon(8.8% 0%, 5.4% 7.2%, 6.2% 20.8%, 0% 24.6%, 0% 29.02%, 4.8% 29.6%, 4.5% 34.06%, 17.3% 41%, 7.4% 56.1%, 42.4% 72.8%, 56.4% 86.7%, 90.3% 99.3%, 99.7% 40.3%, 79.2% 30.6%, 70.9% 31.2%, 73.7% 57.7%, 57.8% 41.6%);cursor: pointer;transition: background-color 0.3s;margin: 0 auto;}.polygon-button:hover {background-color: #45a049; /* 悬停时的颜色 */}</style>
</head>
<body><div class="polygon-button" onclick="alert('Button clicked!')"></div></body>
</html>