无div纯css实现一个俯瞰镶嵌图案背景效果代码-html代码-BFW代码库

无div纯css实现一个俯瞰镶嵌图案背景效果代码

代码语言：html

所属分类：背景

代码描述：无div纯css实现一个俯瞰镶嵌图案背景效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        html {	
        	--u: 1vmax;
        	--hue: hue-rotate(0deg);
        	--c1: #000000;
        	--c2: #9a1f22;
        	--c3: #e35e13;
        	--gp: 50%/calc(var(--u) * 12) calc(var(--u) * 17.05);
        	height: 100vh;
        	filter: var(--hue);
        	background: 
        		
        		repeating-conic-gradient(from 0deg at 13.68% 94.08%, #fff0 0 50%, var(--c2) 0% 83.33%, #fff0 0 100%)  var(--gp),  /* left red end */
        		repeating-conic-gradient(from 0deg at 86.12% 94.08%, #fff0 0 16.66%, var(--c2) 0% 50%, #fff0 0 100%)  var(--gp),  /* right red end */
        	
        		repeating-conic-gradient(from 0deg at 28.42% 88.14%, #fff0 0 50%, var(--c1) 0% 83.33%, #fff0 0 100%)  var(--gp),  /* left black end */
        		repeating-conic-gradient(from 0deg at 71.57% 88.14%, #fff0 0 16.66%, var(--c1) 0% 50%, #fff0 0 100%)  var(--gp),  /* right black end */
        	
        		repeating-conic-gradient(from 0deg at 7.36% 43.70%, #fff0 0 50%, var(--c1) 0% 75%, #fff0 0 100%)  var(--gp),  /* left black vert*/
        		repeating-conic-gradient(from 0deg at 92.64% 43.70%, #fff0 0 25%, var(--c1) 0% 50%, #fff0 0 100%)  var(--gp),  /* right black vert */
        	
        		repeating-conic-gradient(from 0deg at 43.15% 82.22%, #fff0 0 50%, var(--c3) 0% 83.33%, #fff0 0 100%)  var(--gp),  /* left orange end */
        		repeating-conic-gradient(from 0deg at 56.84% 82.22%, #fff0 0 16.66%, var(--c3) 0% 50%, #fff0 0 100%)  var(--gp),  /* right orange end */
        			
        		repeating-conic-gradient(from 0deg at 23.15% 50.37%, #fff0 0 50%, var(--c3) 0% 75%, #fff0 0 100%)  var(--gp),  /* left orange vert */
        		repeating-conic-gradient(from 0deg at 76.85% 50.37%, #fff0 0 25%, var(--c3) 0% 50%, #fff0 0 100%)  var(--gp),  /* r.........完整代码请登录后点击上方下载按钮下载查看