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-wh.........完整代码请登录后点击上方下载按钮下载查看