纯css布局实现折叠矩形形状效果代码
代码语言:html
所属分类:布局界面
代码描述:纯css布局实现折叠矩形形状效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .folded { --r: 30px; /* control the folded part */ width: 250px; aspect-ratio: 1.5; box-sizing: border-box; background: linear-gradient(90deg,#0007,#0000 calc(var(--r)/2) calc(100% - var(--r)/2),#0007) #88C425 } .one { border-radius: 0 0 var(--r) var(--r); --_m:0,#0000 100%,#000 calc(100% + 1px); mask: radial-gradient(var(--r) at 100% var(--_m)) no-repeat, radial-gradient(var(--r) at 0 var(--_m)) 100% 0 no-repeat, linear-gradient(#0000 var(--r),#000 0); mask-size: var(--r); } .two { border-radius: var(--r) var(--r) 0 0; --_m:100%,#0000 100%,#000 calc(100% + 1px); mask: radial-gradient(var(--r) at 100% var(--_m)) 0 100% no-repeat, radial-gradient(var(--r) at 0 var(--_m)) 100% 100% no-repeat, linear-gradient(0,#0000 var(--r),#000 0); mask-size: var(--r); } .three { border-radius: var(--r) 0/calc(2*var(--r)) 0; padding-block: var(--r); --_m:#0000 100%,.........完整代码请登录后点击上方下载按钮下载查看
网友评论0