How to use pure CSS to implement single-element McDonald's logo (with source code)

This article brings you the content is about how to use pure CSS to achieve single-element McDonald's logo (with source code), there is a certain reference value, the need for friends can refer to, I hope you have some help.

Effect Preview

Source code Download

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

Code interpretation

To define the DOM, there are only 1 elements:

<div class = "mcdonalds"> </ div>
Center display:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient (circle at center, darkred, black);
}
Define the container size:

.mcdonalds {
    width: 36em;
    height: 30em;
    font-size: 5px;
    color: red;
    background-color: currentColor;
}
Use pseudo elements to draw the shape of the left half of the letter m:

.mcdonalds {
    position: relative;
    overflow: hidden;
}

.mcdonalds :: before {
    content: '';
    position: absolute;
    width: 20em;
    height: calc (30em * 2);
    box-sizing: border-box;
    border: solid yellow;
    border-width: 2.2em 4.4em;
    border-radius: 50%;
}
Make a copy of the left half, that is, the shape of the right half n, together with the left to form the letter m:

.mcdonalds :: before {
    filter: drop-shadow (16em 0 0 yellow);
}
Use a pseudo element to cover the bottom of the middle vertical line of the letter m a little, so that the vertical sides are longer:

.mcdonalds :: after {
    content: '';
    position: absolute;
    width: 6em;
    height: 1.5em;
    background-color: currentColor;
    left: calc ((36em-6em) / 2);
    bottom: 0;
}
Finally, extend the red background a bit:

.mcdonalds {
    box-shadow: 0 0 0 10em;
}
You're done!