如何使用純CSS實現單元素麥當勞的Logo（附源碼）

本篇文章給大家帶來的內容是關於如何使用純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;}

大功告成！