用css简单画了一只小鸟，效果图如下：
代码如下：
HTML：
<div class="box-canvas"> <div class="body"><div class="head"></div><div class="wing"></div></div><div class="mouth"></div><div class="foot"></div></div>
CSS：
重点：
1、:root选择器 ：匹配文档的根元素，在HTML中根元素始终是HTML元素。
2、CSS变量（或称 自定义属性、级联变量）：由自定义属性标记设定值（比如：--main-color: black;），由var()函数来获取值（比如：color:var(--main-color);）
3、CSS画三角形：width为0，height为0，再通过border-方向设置不同的值，透明或有颜色。
:root{--white:white;--black:#544;--main-color:rgb(231, 122, 164);}body{background:rgb(121, 194, 228);}.box-canvas{position: relative;margin: auto;display: block;margin-top: 8%;margin-bottom: 8%;width: 400px;height:400px;}.body{width:280px;height:250px;border-radius: 65% 25% 60% 5%;position: absolute;top:0;left:0;background:var(--main-color);transform: rotate(10deg);z-index: 1;}.head{position: absolute;top:-50px;right:0;width:200px;height:250px;border-radius: 65% 45% 50% 5%; background:var(--main-color); transform: rotate(8deg);}.head::before{content: '';position: absolute;top:33px;right:60px;width:6px;height:6px;border-radius: 50%; background:var(--white); z-index: 4;}.head::after{content: '';position: absolute;top:30px;right:55px;width:20px;height:20px;border-radius: 50%; background:var(--black); }.wing{width:120px;height: 120px;background:var(--white);border-radius: 100% 15% 75% 5%;transform: translate(25%,55%) rotate(-0deg);position: absolute;top:0;left:0;}.mouth{width:0px;height:0px;border-top: 10px solid transparent;border-left: 20px solid var(--black);border-bottom: 10px solid transparent;position: absolute;top:20px;right:90px;}.foot{position: absolute;top:240px;left:140px;background: var(--black);}.foot::before{content: '';width:8px;height:50px;background: var(--black);position: absolute;top:0px;left:-10px;}.foot::after{content: '';width:8px;height:50px;background: var(--black);position: absolute;top:0px;left:15px;}
