css实现折纸便签纸张效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现折纸便签纸张效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .note { position: relative; display: inline-block; vertical-align: top; width: 15em; padding: 2em; margin: 0 1rem; color: white; font: 100%/1.6 Baskerville, Palatino, serif; border-radius: .5em; position: relative; background: #58a; /* Fallback */ background: linear-gradient(-155deg, rgba(0, 0, 0, 0) 1.5em, #5588aa 0%); border-radius: .5em; } .note::before { content: ''; position: absolute; top: 0; right: 0; background: linear-gradient(toleft bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.4)) 100% 0 no-repeat; width: 1.65507em; height: 3.5493em; transform: translateY(-1.89424em) rotate(-40deg); transform-origin: bottom right; border-bottom-left-radius: inherit; box-shadow: -0.2em 0.2em 0.3em -0.1em rgba(0, 0, 0, 0.15); } .note + .note { font-size: 130%; position: relative; background: #655; /* Fallback */ background: linear-gradient(-110deg, rgba(0, 0, 0, 0) 2em, #665555 0%); border-radius: .5em; } .note + .note::before { content: ''; position: absolute; top: 0; right: 0; background: linear-gradient(toleft bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.4)) 100% 0 no-repeat; width: 5.84761em; height: 2.12836em; transform: translateY(3.71925em) rotate(50deg); transform-origin: bottom right; border-bottom-left-radius: inherit; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0