如何使用纯CSS实现单元素麦当劳的Logo（附源码）

效果预览

源代码下载

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

代码解读

定义 dom，只有 1 个元素：

<div class="mcdonalds"></div>

居中显示：

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

定义容器尺寸：

.mcdonalds {
 width: 36em;
 height: 30em;
 font-size: 5px;
 color: red;
 background-color: currentColor;
}

用伪元素画出字母 m 的左半边 n 的形状：

.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%;
}

把左半边复制一份，即是右半边 n 的形状，和左边一起组成了字母 m：

.mcdonalds::before {
 filter: drop-shadow(16em 0 0 yellow);
}

用伪元素遮住字母 m 中间竖线底部一点点，使两边的竖显得长一些：

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

最后，将红色背景向外延伸一些：

.mcdonalds {
 box-shadow: 0 0 0 10em;
}

大功告成！