div+css实现边角切割立体折纸效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现边角切割立体折纸效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> cutcorner{ display: block; width: fit-content; --size: 40px; --outset: 10px; padding: var(--outset); position: relative; clip-path: polygon( 0 calc(var(--size) * var(--tl, 0)), calc(var(--size) * var(--tl, 0)) 0, calc(100% - var(--size) * var(--tr, 0)) 0, 100% calc(var(--size) * var(--tr, 0)), 100% calc(100% - var(--size) * var(--br, 0)), calc(100% - var(--size) * var(--br, 0)) 100%, calc(var(--size) * var(--bl, 0)) 100%, 0 calc(100% - var(--size) * var(--bl, 0)) ); &[topleft]{ --tl: 1 } &[topright]{ --tr: 1 } &[bottomright]{ --br: 1 } &[bottomleft]{ --bl: 1 } &::after{ content: ""; position: absolute; inset: 0; --gr: hsl(0 0% 0% / .5) 50%, #0000; background: radial-gradient(100% 100% at top left, var(--gr)) top left / calc(var(--size) * var(--tl, 0)) calc(var(--size) * var(--tl, 0)), radial-gradient(100% 100% at top right, var(--gr)) top right / calc(var(--size) * var(--tr, 0)) calc(var(--size) * var(--tr, 0)), radial-gradient(100% 100% at bottom right, var(--gr)) bottom right / calc(var(--size) * var(--br, 0)) calc(var(--size) * var(--br, 0)), radial-gradient(100% 100% at bottom left, var(--gr)) bottom left / calc(var(--size) * var(--bl, 0)) calc(var(--size) * var(--bl, 0)); background-repeat: no-repeat; } } h1 { margin: 0; background-color: white; text-align: center; pa.........完整代码请登录后点击上方下载按钮下载查看
网友评论0