div+css实现堆叠图形效果代码-html代码-BFW代码库

div+css实现堆叠图形效果代码

代码语言：html

代码描述：div+css实现堆叠图形效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
  
  
<style>
:root {  
  --width: 100px;
  --height: 100px;
  --l-purple: #b781e9;
  --d-purple: #350a5e;
  --v-purple: #8a2be2;
}

body {
  background: black;
  margin: 5rem;
}

.container {
  max-width: 500px;
  margin: 0 auto;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 100px);
  grid-template-rows: repeat(5, 100px);
}

.shape {
  width: var(--width);
  height: var(--height);
  clip-path: circle(100% at 0 0);

}

.shape:nth-child(1),
.shape:nth-child(3n+4) {
  background-color: var(--v-purple); ;
}

.shape:nth-child(2), 
.shape:nth-child(3n+2) {
  transform: rotate(45deg);
  background-color: var(--l-purple);
}

.shape:nth-child(3n+3) {
  transform: rotate(120deg);
  background-color: var(--d-purple);
}
</style>

  
</head>

<body >
  <div class="container">
  <div class="grid-container">
    <div class="shape">
    </div>
    <div class="shape">
    </div>
    <div class="shape">
    </div>
    <div class="shape">
    </div>
    &l.........完整代码请登录后点击上方下载按钮下载查看