css和svg多边形按钮实现

1. css实现

1.1 强行实现

页面效果

image.png

代码

总结
不适用背景颜色变化较多时。

1.2 clip-path实现

页面效果

image.png

代码

总结
使用css的clip-path属性截取按钮形状，通过div叠加的方式实现边框。clip-path属性暂未发现更好添加border的方式。
参考：CSS3剪贴路径（Clip-path）在线生成器工具

2. SVG实现

2.1 多边形SVG

2.1.1 填充背景

页面效果

image.png

代码实现

2.2.1 渐变背景

页面效果

image.png

代码实现

2.2.3 内渐变边框 （最接近CSS效果）

效果

image.png

代码实现

通过feGaussianBlur的stdDeviation调节模糊半径, filter的id为唯一标识，filter的url用于绑定标识

参考自：SVG内发光实现(CSDN)

2.2 线条SVG

页面效果

image.png

代码实现

（背景颜色设置同2.1）

---

svg: viewbox大小用于设置图标自适应
polyline\polygon: fill设置填充背景， stroke设置边框颜色， stroke-width设置边框宽度