css实现格子背景代码-html代码-BFW代码库

css实现格子背景代码

代码语言：html

所属分类：背景

代码描述：css实现格子背景代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

     <style>

.container {
  width: 100vw;
  height: 100vh;
  --u: 0.5vmin;
  --c1: #fdf6e3;
  --c2: #2a9d8f;
  --c3: #e9c56a19;
  --c4: #2a9d8f50;
  --c5: #e9c46a40;
  --c6: #e9c46a40;

  --draw-mid: #fff0 0 calc(var(--u) * 3.25), var(--c4) calc(var(--u) * 3.5),
    #fff0 calc(var(--u) * 3.75) 100%;
  --draw-left: #fff0 0 calc(var(--u) * 3.25), var(--c5) calc(var(--u) * 3.5),
    #fff0 calc(var(--u) * 3.75) 100%;
  --draw-right: #fff0 0 calc(var(--u) * 3.25), var(--c6) calc(var(--u) * 3.5),
    #fff0 calc(var(--u) * 3.75) 100%;
  --draw-white: var(--c1) calc(var(--u) * 3.58) calc(var(--u) * 3.62),
    #fff0 calc(var(--u) * 3.66) 100%;
  --p1: var(--c1) calc(var(--u) * 3.5), var(--c3) calc(var(--u) * 3.9),
    #fff0 calc(var(--u) * 4) 100%;
  --p2: var(--c1) calc(var(--u) * 3.75), #fff0 calc(var(--u) * 4) 100%;

  --c0: ellipse at 0%;
  --c50: ellipse at 50%;
  --c100: ellipse at 100%;

  --gp: 50% / calc(var(--u) * 20) calc(var(--u) * 10);

  background:
    repeating-linear-gradient(
      45deg,
      #2a9d8f10,
      #e9c46a15 calc(var(--u) * 5),
    .........完整代码请登录后点击上方下载按钮下载查看