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

1. 效果图：

效果地址：https://codepen.io/flyingliao/pen/JgavjX

原理：m是伪元素::before弄出来的，::after遮挡中间下方一小块。

感想：学到一个复制，嘿嘿嘿嘿嘿，filter:drop-shadow(位置上、下、左、右、 颜色)。

HTML code:

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

CSS code:

/* 清除最基本的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;
}