画一只动态的皮卡丘（二）

前言

继续总结过程中学到的新知识，这是第2部分。

一 画一个倾斜的 弧度

.upperLip{
  width: 80px;               /*设置上嘴唇的宽高*/
  height: 20px;
  border: 3px solid black;
  }
  
.upperLip.left{
  border-bottom-left-radius: 40px 20px;   /*设置左下角圆弧*/
  border-top: none;
  border-right: none;
  transform: rotate(-20deg);         /*设置整体一个旋转角度*/
}

二 在弧度下画一个椭圆，只显示一部分

1 先形成一个椭圆：

.lowerLip{
  width: 300px;              /*决定了椭圆的宽度*/
  height: 3500px;
  background: #fc4a62;
  border-radius: 200px/2000px;    /*简写形式，水平半径和垂直半径*/
  border:2px solid black;
  
  position: absolute;
  bottom: 0;        /*距离相对元素下面0,即上移至相对元素底对齐*/   
  left: 50%;
  margin-left: -150px;    /*水平居中对齐*/ 
  z-index: -1;
}

2 隐藏椭圆多的部分：

设置容器绝对定位：