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

代码实现

I love SVG

2.2.1 渐变背景

页面效果

image.png

代码实现

I love SVG

2.2.3 内渐变边框 (最接近CSS效果)

效果

image.png

代码实现

I love SVG

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

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

2.2 线条SVG

页面效果

image.png

代码实现

I love SVG

(背景颜色设置同2.1)


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

你可能感兴趣的:(css和svg多边形按钮实现)