纯css布局画一个女人的画像效果-html代码-BFW代码库

纯css布局画一个女人的画像效果

代码语言：html

代码描述：纯css布局画一个女人的画像效果

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


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

<head>

  <meta charset="UTF-8">
  

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

#desc {
  height: 0;
  width: 0;
  overflow: hidden;
  left: -1000in;
}

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

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

.face-1 {
  background: #dc9178;
  clip-path: polygon(46.80% 76.10%,39.20% 27.00%,44.50% 14.30%,61.00% 10.90%,72.60% 19.00%,74.50% 27.10%,74.00% 38.30%,73.80% 42.30%,73.40% 46.30%,71.60% 52.90%,69.80% 56.40%,66.90% 61.10%,64.50% 63.50%,64.00% 68.70%,65.80% 70.20%,70.30% 80.40%);
}

.shirt-clear {
  background: #00237a;
  clip-path: polygon(-0.40% 103.60%,1.00% 93.00%,2.80% 91.40%,5.80% 87.20%,9.40% 84.80%,8.20% 89.20%,8.60% 92.60%,10.20% 89.2%,12.40% 96.8%,12.4% 108.8%,24.8% 102.8%,22.2% 96.20%,29.8% 100.6%,29.4% 113.6%,4.00% 112.8%);
}

.shirt-dark {
  background: #2e2334;
  clip-path: polygon(103.60% 98.00%,98.80% 92.00%,97.20% 87.00%,95.40% 83.20%,93.00% 81.80%,94.40% 85.00%,94.40% 90.20%,94.20% 97.00%,94.00% 101.0%,90.60% 101.8%,90.60% 97.20%,89.40% 90.80%,87.20% 85.60%,87.00% 92.40%,87.00% 114.0%);
}

.shirt-dark-2 {
  background: #2e2334;
  clip-path: polygon(65.10% 69.55%,64.55% 70.95%,63.95% 72.45%,64.90% 73.95%,61.50% 76.30%,62.30% 77.90%,65.40% 77.40%,67.85% 75.80%,69.90% 76.55%,70.55% 73.15%,69.55% 72.55%,67.50% 71.75%,67.05% 71.30%,66.00% 69.45%);
}

.lip-bottom-light {
  background: rgba(255,255,255,0.33);
  clip-path: polygon(61.60% 56.05%,63.55% 56.20%,62.40% 57.45%,61.30% 57.25%,61.25% 56.80%);
}

.shadow-ear .........完整代码请登录后点击上方下载按钮下载查看