css画小熊猫

这是demo的原型连接https://codepen.io/khr2003/pen/BGZdXw
制作思路：
把小熊猫分解

image.png

1.定位思路：position: absolute;的绝对定位
2.宽高通过继承父容器containe宽高的百分比定宽高
3.小熊猫分解成脸部、耳朵、毛三部分

.container{
  height:50vh;
  width:50vh;
  left:50%;
  top:50%;
  margin-top:-25vh;
  margin-left:-25vh;
  position:absolute;
}

居中显示

.face
    {
      position: absolute;
      background-color: #f68122;
      width: 70%;
      height: 50%;
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
      overflow: hidden;
      left: 15%;
      top: 25%;
}

关键 border-radius 画一个不规则圆

.mouth{
  position: absolute;
  bottom: 5%;
  width: 40%;
  height: 40%;
  background-color: white;
  border-radius: inherit;
  left: 30%;
}

同理嘴部背景也是缩放
lips-top是制作嘴部弯曲的区域限制
两个弯的嘴可以看作是一个白色的正方体纯在底部和右部的border
并且border做了radius，并且做了旋转效果 transform: rotate(6deg);

.lips-top{
  position:absolute;
  top: 50%;
  left: 30%;
  height:28%;
  width: 40%;
 `border-radius: 50% 50%;
  z-index: 2;
}
.lips-top::before{
    content: "";
    position: absolute;
    right: 50%;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: white;
    border-radius: 0 0 50% 30%;
    transform: rotate(6deg);
    border-right: 4px solid  #3d2115;
    border-bottom: 4px solid #3d2115;
}
.lips-top::after{
    content: "";
    position: absolute;
    left:50%;
    width: 50%;
    height: 100%;
    background-color: white;
    border-radius:0 0 30% 50% ;
    transform: rotate(-6deg);
    border-left: 4px solid  #3d2115;
    border-bottom: 4px solid #3d2115;
}

image.png

眉毛是一个长方体，左右白色右边橙色，在白色部分画一个圆向橙色部分偏移50%。橙色部分画一个圆向白色部分偏移50%，旋转椭圆，

.eyebrow{
    position: absolute;
    top: 18%;
    height: 20%;
    width: 16%;
    background: linear-gradient(-90deg, white 50%, #f68122 51%);//线性渐变左边白色右边橙色
    z-index: 1;
    border-radius: 50%;
    transform: rotate(15deg);
      }        
.eyebrow::before, .eyebrow::after
        {
          content: "";
          position: absolute;
          left: 50%;
          top: 0;
          transform: translateX(-50%);
          height: 43%;
          width: 40%;
          background-color: white;
          border-radius: 50%;
        }
.eyebrow::after{
          top: 41%;
          left: 59%;
          background-color: #f68122;
          height: 60%;
          width: 60%;
}
.eyebrow.left{
  left: 31%;
  
}
.eyebrow.right{
  right: 31%;
  background: linear-gradient(-90deg, #f68122 50%, white 51%);
}

脸颊部分白色是cheek的白色阴影效果，box-shadow: -25px 3px 0 8px white;
cheek的内容是棕色椭圆形，棕色椭圆形上面叠加了倾斜的橙色椭圆形，由于脸颊的z-index小于嘴部，倾斜的橙色椭圆形部分在嘴部下面。

image.png

.cheek{
     position: absolute;
    top: 37%;
    height: 70%;
    width: 20%;
    z-index: 0;
    border-radius: 50%;
    background-color: #3d2115;
    
}
.cheek.left{
  left: 18%;
  box-shadow: -25px 3px 0 8px white;
}
.cheek.right{
  right:18%;
  box-shadow: 25px 3px 0 8px white;
}
.cheek::before{
  content: "";
  background-color: #f68122;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  transform-origin: top center;
  border: 0px solid transparent;
}
.cheek.left::before{
  top: -2%;
  left: -7%;
  transform: rotate(-15deg);
}
.cheek.right::before{
  top: -2%;
  right: -7%;
  transform: rotate(15deg);
}

2耳朵部分
一个倾斜的长方体内有圆形，圆形border3px白色

image.png

圆形左侧border20%，旋转-45后，skew(20deg, 20deg);2D扭曲

image.png

.ear.left{
    position: absolute;
    height: 25%;
    width: 25%;
    left: 10%;
    top: 25%;
    overflow: hidden;
    transform: translate(-25%, -25%) rotate(-40deg);
    z-index: -1;
  border:1px solid
}
.ear.left::before{
          content: "";
          position: absolute;
          left: 0;
          top: 60%;
          width: 100%;
          height: 100%;
          border: 7px solid white;
          background-color: #3d2115;
          box-sizing: border-box;
          transform: rotate(45deg) skew(20deg, 20deg);
          border-radius: 20% 50% 50% 50%;
}