単一の要素の79純粋なCSSの作成マクドナルドの黄金のアーチロゴ（オリジナル）

1.図の影響：

エフェクト住所：https://codepen.io/flyingliao/pen/JgavjX

原則：mは擬似要素である::それが出てくる前に、::小さな中間の下の閉塞後。

思考：ドロップシャドウ（ポジションアップ、ダウン、色、右、左）：ねえ、フィルターねえねえ、コピーを取得。

HTMLコード：

<！ - マクドナルド：麦当劳- > 
< divのクラス= "マクドナルド" > </ DIV >

CSSコード：

/ * クリア基本的なマージンとパディング* / 
HTML、身体 { 
  マージン：0 ; 
  パディング：0 ;
}
/ * を設定体サブエレメント水平および垂直中心* / 
ボディ { 
  身長：100VH ;
   / * 水平垂直中心* / 
  表示：フレックス ; 
  正当化・コンテンツ：センター ; 
  ALIGN =左アイテム：センター ; 
  背景：中心に放射状勾配（サークル、darkred、ブラック） ; 
  フォントサイズ：12ピクセル ;
}
/ * 定义マクドナルド尺寸* / 
.mcdonalds { 
  位置：相対。
  幅：36em ; 
  高さ：30em ; 
  色：赤 ; 
  背景色：currentColor。
  オーバーフロー：隠されました ;
}
/ * M、N擬似ハーフ形状要素を残した文字を描く* / 
.mcdonalds ::前 { 
  位置：絶対 ;
   / * 幅設定セット、ボーダーを含む高さ、パディング、コンテンツ* / 
  ボックス・サイジング：ボーダーボックス ; 
  内容：'' ; 
  幅：20em ; 
  高：計算値（30em * 2） ; 
  ボーダー幅：2.2em 4.4em ; 
  ボーダースタイル：固体 ; 
  ボーダー色：黄色 ; 
  ボーダーRADIUS：50％;
}
/ * コピー側左* / 
前.mcdonaldsを:: { 
  フィルタ：ドロップシャドウ（イエロー16em 0）
 }
 / * 閉塞中間体Mの後に擬似要素を使用して:: * / 
.mcdonalds ::後 { 
  位置：絶対 ; 
  内容：'' ; 
  幅：6EM ; 
  高さ：10em ; 
  左：計算値（（36em - 6EM）/ 2） ; 
  底：0 ; 
  地色：currentColor。
}