纯CSS画一只简单的小鸟

用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;
}