纯CSS+HTML绘制小猪佩奇---泥腿子前端出品

年前也不知从具体何时开始我儿子迷上了小猪佩奇，再加上朋友圈疯狂传播的鼓风机版小猪佩奇宣传片，这两件事情促使我这个泥腿子前端产生了用代码绘制一副小猪佩奇图案的想法，做为一名“优秀的”开发来讲，有想法就落实到行动中，这是必须的职业素养。代码是1月22号完成的，当时想发表出来的，因为年末工做比较繁忙，就拖到了如今。话很少说，先上效果图：

绘制这张图时，HTML主要就是div盒模型，css主要运用到了border-radius以及transform属性，例如绘制佩奇裙子的时候CSS和HTML代码以下：

/* 佩奇身体 泥腿子前端*/
.pigBody {
   background-color: #de384e;
   border: 6px solid #BE002E;
   position: absolute;
   z-index: 16;
   bottom: 94px;
   left: 300px;
   width: 150px;
   height: 116px;
   box-sizing: border-box;
   border-radius: 110% 110% 0 0/260% 260% 0 0;
}
<!-- 佩奇身体 start 泥腿子前端-->
<div class="pigBody"></div>
<!-- 佩奇身体 end 泥腿子前端-->复制代码

裙子效果如图：

这个难点就是要弄懂border-radius 属性的具体定义和用法，border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。

border-radius: 1-4 length|% / 1-4 length|%;复制代码

按此顺序设置每一个 radii 的四个值。若是省略 bottom-left，则与 top-right 相同。若是省略 bottom-right，则与 top-left 相同。若是省略 top-right，则与 top-left 相同。

border-radius: 2px 1px 4px / 0.5px 3px;
复制代码

等同于

border-top-left-radius: 2px 0.5px;
border-top-right-radius: 1px 3px;
border-bottom-right-radius: 4px 0.5px;
border-bottom-left-radius: 1px 3px;
复制代码

掌握了这点小猪佩绘制就简单多了，就是工做量的事情。

这张图中看似复杂的我我的以为就是佩奇的尾巴了，我是用了几个图块拼接的，效果图以下：

CSS和HTML代码以下：

/* 佩奇尾巴 泥腿子前端*/
.tail1{
   height: 20px;
   width: 18px;
   position: absolute;
   bottom: 114px;
   left: 279px;
   background-color: #4bdeff;
   border: 6px solid #ffd1e8;
   box-sizing: border-box;
   border-radius: 50% 50% 10% 50%;
   transform: rotate(35deg);
}
.tail2{
   height: 6px;
   width: 18px;
   position: absolute;
   bottom: 112px;
   left: 289px;
   background-color: #ffd1e8;
   border-radius: 0 0 150% 150% / 101% 0 150% 150%;
   transform: rotate(-15deg);
}
.tail3{
   height: 7px;
   width: 14px;
   position: absolute;
   bottom: 109px;
   left: 275px;
   background-color: #ffd1e8;
   border-bottom: 6px soild #ffd1e8;
   box-sizing: border-box;
   border-radius: 0 0 238% 211%;
   transform: rotate(-4deg);
}
.tail4{
   left: 266px;
   bottom: 112px;
   transform: rotate(47deg);
}
<!-- 佩奇尾巴 start 泥腿子前端-->
<div class="tail">
   <div class="tail1"></div>
   <div class="tail2"></div>
   <div class="tail3"></div>
   <div class="tail3 tail4"></div>
</div>
<!-- 佩奇尾巴 end 泥腿子前端-->复制代码

不知道为何每次贴代码发表完都要从新调一下格式没要否则全显示在一行，因此整个源码我放在了GitHub上了，连接为：github.com/HailongJian…