Effect Preview

Press the "click preview" button on the right to preview the current page, and click the link to preview the whole screen.

https://codepen.io/comehope/pen/WaaBNV

Interactive Video

This video is interactive, you can pause the video at any time, edit the code in the video.

Please open it with chrome, safari, edge.

https://scrimba.com/p/pEgDAM/c3DQeC7

Source code download

The full source code of the daily front-end combat series is downloaded from github:

https://github.com/comehope/front-end-daily-challenges

Code Interpretation

Define dom. The three elements in the container represent caps, whiskers and canes.

<figure class="chaplin">
    <span class="hat"></span>
    <span class="beard"></span>
    <span class="stick"></span>
</figure>

Centralized display:

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

Define the container size and set the child element level to the middle:

.chaplin {
    width: 40em;
    height: 30em;
    font-size: 10px;
    background-color: #eee;
    box-shadow: 0 0 3em rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
}

Define the default color and refer to it later with current color:

.chaplin {
    color: #555;
}

Draw the outline of the hat:

.chaplin {
    position: relative;
}

.hat {
    position: absolute;
    width: 6.4em;
    height: 4.6em;
    background-color: currentColor;
    border-radius: 2.3em 2.3em 0 0;
    top: 1.4em;
}

Use pseudo-elements to draw the brim:

.hat::before {
    content: '';
    position: absolute;
    width: 10em;
    height: 0.8em;
    background-color: currentColor;
    border-radius: 0.4em;
    top: calc(100% + 0.4em);
    left: calc((100% - 10em) / 2);
}

Draw a beard:

.beard {
    position: absolute;
    width: 1.5em;
    height: 0;
    top: 11.6em;
    border: solid transparent;
    border-width: 0 0.4em 1em 0.4em;
    border-bottom-color: currentColor;
}

Draw the stick of the stick:

.stick {
    position: absolute;
    width: 0.8em;
    height: 10.5em;
    background-color: currentColor;
    bottom: 0;
}

Use: before pseudo elements to draw the handle of the walking stick:

.stick::before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    width: 5.6em;
    height: 3em;
    border: 0.8em solid;
    border-radius: 5.6em 5.6em 0 0;
    border-bottom: none;
    top: -3em;
}

Use:: after pseudo-elements to modify the end of the handle to make it smooth and natural.

.stick::after {
    content: '';
    position: absolute;
    width: 0.8em;
    height: 0.8em;
    background-color: currentColor;
    border-radius: 50%;
    left: calc(5.6em - 0.8em);
    top: -0.4em;
}

Medium the cane level:

.stick {
    left: calc((100% - (5.6em - 0.8em)) / 2);
}

So far, the abstract image of Chaplin is completed, and then a famous quote is typesetted.
Add A. quote element to the dom and divide a sentence into three paragraphs:

<figure class="chaplin">
    <span class="hat"></span>
    <span class="beard"></span>
    <span class="stick"></span>
    <p class="quote">
        <span>a day without</span>
        <span>laughter</span>
        <span>is a day wasted</span>
    </p>
</figure>

Locate the text and arrange three paragraphs vertically:

.quote {
    position: absolute;
    left: 50%;
    bottom: 2.5em;
    font-family: sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    display: flex;
    flex-direction: column;
}

Adjust the font size and spacing to align the three paragraphs:

.quote span:nth-child(1) {
    letter-spacing: 0.05em;
}

.quote span:nth-child(2) {
    font-size: 1.6em;
}

Be accomplished!