单个div+css布局实现盘中蛋糕代码-html代码-BFW代码库

单个div+css布局实现盘中蛋糕代码

代码语言：html

代码描述：单个div+css布局实现盘中蛋糕代码

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

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

<head>
  <meta charset="UTF-8">
  
  
<style>
div, div:before, div:after {
  display: block;
  content: "";
  position: absolute;
  box-sizing: border-box;
}

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  background-color: #F5F0E8;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(210, 200, 185, 0.18) 3px, rgba(210, 200, 185, 0.18) 4px), repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(210, 200, 185, 0.12) 3px, rgba(210, 200, 185, 0.12) 4px), radial-gradient(ellipse at center, #FAF7F2 0%, #EDE6D8 100%);
}

div.piece-of-cake {
  width: 100vmin;
  height: 70vmin;
  display: flex;
  margin: 0 auto;
  position: relative;
  background: radial-gradient(ellipse, rgba(118, 18, 28, 0.9) 0vmin, rgba(118, 18, 28, 0.9) 0.25vmin, transparent 0.5vmin) calc(0vmin + 80.75vmin) calc(0vmin + 48vmin)/0.75vmin 1.25vmin no-repeat, radial-gradient(ellipse at top left, transparent 48%, rgba(184, 28, 44, 0.9) 49%, rgba(118, 18, 28, 0.9) 50%, rgba(118, 18, 28, 0.9) 50.5%, transparent 51%) calc(0vmin + 72vmin) calc(0vmin + 49vmin)/13vmin 12vmin no-repeat, radial-gradient(ellipse, #5C2E0A 0vmin, transparent 1vmin) calc(0vmin + 71.25vmin) calc(0vmin + 56.5vmin)/1.5vmin 1.5vmin no-repeat, radial-gradient(ellipse at bottom right, transparent 38%, transparent 40%, rgba(184, 28, 44, 0.9) 50%, transparent 60%, transparent 62%) calc(0vmin + 65.25vmin) calc(0vmin + 53vmin)/4vmin 4vmin no-repeat, radial-gradient(circle, rgba(184, 28, 44, 0.9) 0.5vmin, rgba(118, 18, 28, 0.9) 2.5vmin, rgba(140, 21, 33, 0.9) 3.75vmin, transparent 4vmin) calc(0vmin + 65.5vmin) calc(0vmin + 53vmin)/8vmin 8vmin no-repeat, radial-gradient(ellipse at bottom right, transparent 38%, transparent 40%, #7f3f0e 50%, transparent 60%, transparent 62%) calc(0vmin + 13.75vmin) calc(0vmin + 41.5vmin)/4vmin 2vmin no-repeat, radial-gradient(ellipse, #170c03 0.5vmin, #170c03 3vmin, transparent 1vmin) calc(0vmin + 13vmin) calc(0vmin + 41vmin)/8vmin 4vmin no-repeat, radial-gradient(ellipse at bottom right, transparent 38%, transparent 40%, #7f3f0e 50%, transparent 60%, transparent 62%) calc(0vmin + 10.25vmin) calc(0vmin + 46.5vmin)/3vmin 1.5vmin no-repeat, radial-gradient(ellipse, #170c03 0.5vmin, #170c03 2.5vmin, transparent 1vmin) calc(0vmin + 10.25vmin) calc(0vmin + 46.5vmin)/5vmin 2.5vmin no-repeat, radial-gradient(ellipse at bottom right, transparent 38%, transparent 40%, #7f3f0e 50%, transparent 60%, transparent 62%) calc(0vmin + 12.25vmin) calc(0vmin + 51.5vmin)/2vmin 1vmin no-repeat, radial-gradient(ellipse, #170c03 0.5vmin, #170c03 2vmin, transparent 1vmin) calc(0vmin + 12.25vmin) calc(0vmin + 51.5vmin)/4vmin 2vmin no-repeat, radial-gradient(ellipse, #170c03 0.5vmin, #170c03 2vmin, transparent 1vmin) calc(0vmin + 17.75vmin) calc(0vmin + 56vmin)/4.5vmin 2.5vmin no-repeat, radial-gradient(ellipse at top right.........完整代码请登录后点击上方下载按钮下载查看