纯css布局绘制一个梅西效果代码-html代码-BFW代码库

纯css布局绘制一个梅西效果代码

代码语言：html

代码描述：纯css布局绘制一个梅西效果代码

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


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

<head>

  <meta charset="UTF-8">

  
<style>
html, body {
  background: #fabf54;
}

.cartoon {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 90vmin;
  height: 90vmin;
}

.cartoon div {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.body {
  background: #4f79c1;
  clip-path: polygon(57.00% 100.78%,58.33% 96.00%,58.00% 93.06%,57.72% 92.19%,58.03% 91.50%,57.67% 89.89%,58.50% 88.69%,58.42% 85.36%,59.14% 84.50%,59.31% 82.19%,59.31% 75.31%,61.14% 69.61%,61.36% 61.39%,61.92% 58.69%,61.89% 57.25%,61.58% 56.44%,58.53% 55.75%,54.11% 55.11%,48.03% 53.39%,44.69% 53.08%,39.31% 51.94%,35.75% 50.92%,32.56% 49.67%,30.17% 48.89%,25.56% 46.69%,27.86% 40.17%,32.00% 41.75%,32.86% 42.25%,37.50% 42.61%,41.44% 43.25%,38.36% 41.03%,35.39% 39.39%,28.69% 35.90%,30.69% 32.30%,32.47% 29.89%,34.81% 31.97%,42.44% 36.00%,45.17% 37.31%,49.97% 38.72%,54.89% 40.17%,60.47% 42.56%,65.36% 43.06%,68.33% 41.97%,71.56% 41.83%,73.53% 42.11%,74.64% 41.25%,76.31% 40.94%,77.44% 41.17%,77.94% 40.67%,78.42% 41.78%,78.42% 42.44%,79.28% 43.31%,79.83% 43.56%,80.31% 44.28%,81.42% 45.53%,82.67% 48.39%,84.19% 53.08%,84.36% 55.14%,84.39% 63.78%,84.19% 65.58%,83.14% 69.69%,80.22% 77.92%,79.31% 81.75%,78.44% 84.19%,77.75% 85.22%,78.28% 86.11%,78.25% 87.06%,77.94% 87.50%,78.72% 89.06%,79.33% 91.25%,81.83% 95.22%,82.78% 97.19%,83.75% 101.42%)
}

.body-top {
  clip-path: polygon(20% 20%, 40% 20%, 40% 40%, 20% 40%);
}

.body-light {
  background: #6b8dcd;
  clip-path: polygon(92.00% 12.22%,89.44% 90.56%,74.44% 92.78%,63.78% 94.44%,69.78% 93.00%,78.78% 91.78%,78.78% 89.33%,80.11% 86.89%,78.33% 72.00%,77.11% 62.89%,79.33% 61.11%,82.67% 59.78%,83.78% 57.11%,83.56% 54.44%,81.22% 49.56%,83.22% 42.78%,72.97% 41.14%,75.58% 43.81%,76.64% 46.14%,74.78% 49.31%,74.64% 50.75%,73.14% 51.42%,68.97% 50.53%,67.03% 49.42%,60.11% 47.72%,57.47% 45.94%,56.83% 44.44%,57.17% 43.83%,60.61% 45.42%,61.42% 45.33%,57.89% 40.39%,43.33% 35.78%,38.31% 36.06%,27.78% 33.86%,33.72% 27.56%,24.25% 35.28%,30.11% 41.06%,32.25% 41.83%,32.86% 42.33%,38.25% 42.69%,41.53% 43.28%,42.67% 43.97%,36.19% 46.39%,33.58% 46.69%,32.72% 46.39%,31.72% 44.39%,27.44% 39.11%,21.75% 64.78%,57.67% 81.00%,62.11% 72.22%,62.42% 75.44%,61.67% 78.36%,60.58% 80.06%,61.33% 77.75%,60.69% 78.00%,61.86% 74.22%,61.36% 74.33%,60.44% 76.44%,55.11% 85.89%,7.78% 59.89%,33.22% 4.11%);
}

.body-dark {
  background: #2a4576;
  clip-path: polygon(20.31% 45.67%,56.97% 87.81%,58.28% 86.53%,59.00% 86.69%,60.22% 86.28%,60.81% 85.22%,62.67% 85.39%,63.89% 84.28%,65.86% 83.56%,67.92% 83.33%,69.36% 83.61%,71.42% 83.61%,72.92% 84.17%,72.64% 83.53%,70.78% 82.67%,63.11% 83.56%,60.53% 84.53%,57.00% 87.00%,49.78% 68.67%,61.89% 57.89%,61.44% 56.00%,61.42% 52.11%,65.33% 52.94%,68.19% 53.97%,69.58% 55.17%,70.56% 62.44%,72.56% 66.78%,75.56% 70.89%,76.00% 71.83%,76.53% 70.58%,75.64% 66.50%,73.14% 61.22%,72.67% 59.17%,74.75% 59.69%,75.92% 59.56%,75.67% 57.03%,75.89% 55.17%,78.89% 54.44%,73.19% 54.25%,68.53% 52.06%,62.78% 51.19%,58.67% 49.89%,51.53% 45.92%,43.64% 42.33%,45.00% 41.89%,40.61% 40.75%,37.42% 39.36%,39.25% 39.06%,38.22% 38.36%,39.83% 37.97%,32.61% 36.42%,29.47% 35.33%,27.44% 33.33%,25.78% 35.44%,34.00% 39.67%,41.22% 43.00%,43.94% .........完整代码请登录后点击上方下载按钮下载查看