如何用纯 CSS 创作一只愤怒小鸟中的绿猪

如何用纯 CSS 创作一只愤怒小鸟中的绿猪

实现步骤

定义 dom，容器中包含 3 个元素，分别代表耳朵、眼睛、鼻子：

<div class="pig">
    <span class="ears"></span>
    <span class="eyes"></span>
    <span class="nose"></span>
</div>

居中显示：

body {
   
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: skyblue;
}

设置伪元素的共有属性，后面有多处用到伪元素：

.pig::before,
.pig::after,
.pig *::before,
.pig *::after {
   
    content: '';
    position: absolute;
}

定义容器尺寸：

.pig {
   
    width: 12em;
    height: 10em;
    font-size: 20px;
    background-color: #50a032;
    border: 0.2em solid #2b4d13;
}

用圆角属性画出头部轮廓：

.pig {
   
    border-radius: 50% 50% 50% 50% / 55% 60% 40% 45%;
}

以前以为border-radius只能设置四个角，实际上可以设置八条边。

画出鼻子的轮廓：

.pig