用一个DIV画吃豆人

方法：运用边框、圆角做出3/4的脸，剩下的1/4⚪为透明色嘴巴，接着使用before做出眼睛，再加定位即可。

更多：运用边框和透明度，将3/4的内容透明，可以得到三角形。

吃豆人 HTML部分

<div></div>

吃豆人 CSS部分

div{
   width: 0px;
   height: 0px;
   /*不设置内容区域，用border边框撑开div。*/
   border: 100px solid #f40;
   /*设置圆角*/
   border-radius: 100px;
   /* 右边框设置透明色，可以当作嘴巴 */
   border-right-color:transparent;
   /*浮动，定位眼睛使用*/
   position:relative;
}
div::before{
   content:"";
   /*眼睛不写内容，宽高要与脸的大小成正比，不要豆豆眼，也不要眼睛比脸还大*/
   width:30px;
   height:30px;
   background:#fff;
   border-radius: 15px;
   /*定位*/
   position:absolute;
   top:-65px;
   left:-15px;
}

• bofore:：添加元素；

• transparent   透明色；

展示区域：