css布局实现图片八边形边框显示效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现图片八边形边框显示效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> img { --n: 5; /* the granularity */ --s: 12px; /* control the pixel size */ --w: 280px; /* the image size */ width: calc(round(var(--w),var(--s)) + var(--s)/2); aspect-ratio: 1; --_m:#0000 calc((var(--s)*(var(--n) + .5))/sqrt(2)), #000 0 calc(100% - (var(--s)*(var(--n) + .5))/sqrt(2)), #0000 0; clip-path: polygon( 50% calc(var(--s)*var(--n) - 50%), calc(150% - var(--s)*var(--n)) 50%, 50% calc(150% - var(--s)*var(--n)), calc(var(--s)*var(--n) - 50%) 50%); mask: repeating-conic-gradient(#0000 0 25%,#000 0 50%) 0 0/.........完整代码请登录后点击上方下载按钮下载查看
网友评论0