79.纯 CSS 创作单元素麦当劳金拱门 Logo（原文）

<!-- mcdonalds: 麦当劳-->
<div class="mcdonalds"></div>

/* 清除最基本的margin和padding */
html,body{
  margin: 0;
  padding: 0;
}
/* 设置body的子元素水平垂直居中 */
body{
  height: 100vh;
  /* 水平垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle at center,darkred,black);
  font-size: 12px;
}
/* 定义mcdonalds尺寸 */
.mcdonalds{
  position: relative;
  width: 36em;
  height: 30em;
  color: red;
  background-color: currentColor;
  overflow: hidden;
}
/* 用伪元素画出字母m的左半边n的形状 */
.mcdonalds::before{
  position:absolute;
  /* 设置设置的width、height包括border、padding、content */
  box-sizing: border-box;
  content: ‘‘;
  width: 20em;
  height: calc(30em * 2);
  border-width: 2.2em 4.4em;
  border-style: solid;
  border-color: yellow;
  border-radius: 50%;
}
/* 复制左半边 */
.mcdonalds::before{
  filter: drop-shadow(16em 0 0 yellow)
}
/* 用::after伪元素遮挡m中间 */
.mcdonalds::after{
  position: absolute;
  content: ‘‘;
  width: 6em;
  height: 10em;
  left: calc((36em - 6em) / 2);
  bottom: 0;
  background-color: currentColor;
}