立体便签效果
代码语言:html
所属分类:布局界面
代码描述:立体便签效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Loved+by+the+King|Reenie+Beanie"); *, *::before, *::after { box-sizing: border-box; margin: 0; } body { font-family: 'Loved by the King', cursive; background-color: #5D576B; color: #171A21; } .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 50px auto; overflow: hidden; width: 80%; grid-template-areas: "title title" "sticker1 sticker2"; margin: 0 auto; padding-top: 100px; grid-gap: 10px; } @media (max-width: 700px) { .container { grid-template-columns: 1fr; grid-template-areas: "title" "sticker1" "sticker2"; } } p { grid-area: title; text-align: center; align-self: center; font-family: 'Reenie Beanie', cursive; font-weight: bold; font-size: 60px; } .note-container { justify-self: center; } .sticky-note { width: 300px; min-height: 300px; padding: 1em; font-size: 20px; letter-spacing: 2px; outline: none; position: relative; margin-top: 50px; margin-bottom: 10px; padding-top: 40px; } .sticky-note::before { content: ""; position: absolute; display: block; } .sticky-note::after { content: ""; position: absolute; bottom: 0; border-width: 12px 12px 12px 12px; border-style: solid; } .sticky-note.stick.........完整代码请登录后点击上方下载按钮下载查看
网友评论0