纯css实现三维断裂金字塔效果代码

代码语言:html

所属分类:布局界面

代码描述:纯css实现三维断裂金字塔效果代码

代码标签: css 三维 断裂 金字塔

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
html {
	--c1: #d6d6d6;
	--c2: #8f8f8f;
	--c3: #353535;
	--c4: #161616;
	background: 
		
		
		/*corners bot*/
		conic-gradient(from 117deg at calc(50% + 128px) calc(50% + 179px), var(--c4) 72deg, #fff0 0 100%),
  	conic-gradient(from 117deg at calc(50% + 15px) calc(50% + 230px), var(--c4) 72deg, #fff0 0 100%),
		conic-gradient(from 191deg at calc(50% - 107px) calc(50% + 181px), var(--c4) 50deg, #fff0 0 100%),
		conic-gradient(from 194deg at calc(50% - 207px) calc(50% + 140px), var(--c4) 55deg, #fff0 0 100%),
		
		/*corners top*/
		conic-gradient(from 9deg at calc(50% + 154px) calc(50% + 18px), var(--c4) 90deg, #fff0 0 100%),
		conic-gradient(from 10deg at calc(50% + 72px) calc(50% - 95px), var(--c4) 81deg, #fff0 0 100%),
		conic-gradient(from -45deg at calc(50% - 50px) calc(50% - 105px), var(--c4) 56deg, #fff0 0 100%), 
		conic-gradient(from -46deg at calc(50% - 198px) calc(50% + 100px), var(--c4) 59deg, #fff0 0 100%),
  
		/*bg*/
		conic-gradient(from 145deg at 50% calc(5.........完整代码请登录后点击上方下载按钮下载查看

网友评论0