单个div实现的网格线条交叉背景效果
代码语言:html
所属分类:布局界面
代码描述:单个div实现的网格线条交叉背景效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background: #fff; font-family: "Comfortaa", sans-serif; } :root { --light-brown: #f8d496; --light-brown-2: #f8c077; --light-brown-3: #f9aa4e; --light-brown-4: #ef9f3d; --brown: #d79457; --cherry: #ad2a3d; --cherry-dark: #961b2f; --cherry-light: #f83e48; --cherry-light-2: #ff5861; --pink: #f6b1c5; --pie: rgb(239,174,102); } .pie { min-height: 100vh; min-width: 100vw; background-color: var(--cherry); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0) 63%, rgba(98, 23, 37, 0.15) 65%, var(--light-brown) 65%, var(--brown) 65%, var(--light-brown-3) 74%, var(--light-brown-2) 86%, var(--pie) 89%, rgba(255, 255, 255, 0) 89%), linear-gradient(45deg, rgba(255, 255, 255, 0) 63%, rgba(98, 23, 37, 0.15) 65%, var(--light-brown) 65%, var(--brown) 65%, var(--light-brown-3) 74%, var(--light-brown-2) 86%, var(--pie) 89%, rgba(255, 255, 255, 0) 89%), linear-gradient(-45deg, rgba(255, 255, 255, 0) 63%, rgba(98, 23, 37, 0.15) 65%, var(--light-brown) 65%, var(--brown) 65%, var(--light-brown-3) 74%, var(--light-brown-2) 86%, var(--pie) 89%, rgba(255, 255, 255, 0) 89%), linear-gradient(45deg, rgba(255, 255, 255, 0) 13%, rgba(98, 23, 37, 0.15) 15%, var(--light-brown) 15%, var(--brown) 15%, var(--light-brown-3) 24%, var(--light-brown-2) 36%, var(--pie) 39%, rgba(255, 255, 255, 0) 39%), linear-gradient(-45deg, rgba(255, 255, 255, 0) 13%, rgba(98, 23, 37,.........完整代码请登录后点击上方下载按钮下载查看
网友评论0