Monkey

index.html

    <div class="monkey">
        <div class="left-ear ear"></div>
        <div class="head">
            <div class="face">
                <div class="eye left-eye"></div>
                <div class="eye right-eye"></div>
                <div class="nose"></div>
                <div class="mouth1">
                    <div class="tooth x-center"></div>
                </div>
                <div class="mouth2">
                    <div class="tongue"></div>
                </div>
            </div>
        </div>
        <div class="right-ear ear"></div>
    </div>

Monkey.markdown

Monkey

A Pen by soyaine on CodePen.

License.

style.css

.x-center {
    left: 50%;
    transform: translate(-50%, -50%);
    content: "";
}

.monkey {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: "";
}

.head {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #352117;
    border-radius: 50%;
    z-index: 5;
}

.ear {
    position: absolute;
    width: 100px;
    height: 130px;
    background-color: #352117;
    border-radius: 50%;
}

.ear:after {
    position: absolute;
    content: "";
    top: 15px;
    left: 6px;
    width: 75px;
    height: 100px;
    border-radius:50%;
    background-color: #eee0c3;
}

.left-ear {
    left: -60px;
    top: 50%;
    transform: translateY(-50%);
}

.left-ear:after {
    left: 15px;
}

.right-ear {
    top: 50%;
    transform: translate(160px, -50%);
    z-index: inherit;
}

.face {
    width: 160px;
    height: 130px;
    background-color:  #eee0c3;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    border-radius: 50%;
    border: 4px solid #eee0c3;
}

.left-eye, .right-eye {
    width: 90px;
    height: 85px;
    position: absolute;
    top: -30px;
    background-color: #eee0c3;
    content: "";
    border-radius: 50%;
}

.left-eye {
    left: 10px;
}

.right-eye {
    left: 55px;
}

.eye:after {
    z-index: 4;
    width: 18px;
    height: 15px;
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #000;
    content: "";
    border-radius: 10px 10px 3px 3px;
}
.nose {
    width: 0;
    height: 0;
    border: 8px solid;
    border-color: transparent transparent #000 transparent;
    border-radius: 5px;
    content: "";
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
}

.mouth1 {
    width: 75px;
    height: 25px;
    background-color: #300715;
    position: relative;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
}

.mouth1:before, .mouth1:after {
    width: 50px;
    height: 45px;
    background-color: #300715;
    position: absolute;
    content: "";
    border-radius: 50%;
}

.mouth1:before {
    left: -27px;
}

.mouth1:after {
    right: -27px;
}

.mouth2 {
    z-index: 4;
    width: 128px;
    height: 64px;
    background-color: #300715;
    border-radius: 0 0 64px 64px;
    position: relative;
    bottom: -37px;
    left: 50%;
    transform: translateX(-50%);
}

.tooth {

    width: 20px;
    height: 25px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    content: "";
    top: 0px;
    overflow: hidden;
}

.tooth:after {
    z-index: 6;
    width: 20px;
    height: 25px;
    background-color:  #eee0c3;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    content: "";
}

.tongue {
    width: 65px;
    height: 55px;
    bottom: -8px;
    left: 20px;
    position: absolute;
}

.tongue, .tongue:before {
    height: 55px;
    background-color: #fe0254;
    border-radius: 50%;
}

.tongue:before {
    width: 60px;
    position: absolute;
    left: 35px;
    top: -8px;
    content: "";
}

.tongue:after {
    width: 147px;
    height: 135px;
    background-color: transparent;
    border: 14px solid;
    border-left-width: 10px;
    border-color: transparent transparent #eee0c3 transparent;
    border-radius: 50%;
    position: absolute;
    content: "";
    left: -41px;
    top: -106px;
}

CSS 绘制