CSSでシンプルな笑顔を作りましょう

この記事では、CSSで非常にシンプルな笑顔を作成する方法をお見せしましょう.
始めましょう

ステップ1：顔を作成する

最初にdivを作成し、クラスを与えます.
このdivは顔になります.

<div class="face"></div>

スタイリングパーツは簡単です.
我々は、正方形を最初に作成し、 border-radius の助けを借りてそれをラウンドします.

.face {
 background-color: #fcba03;
 width: 400px;
 height: 400px;
 border-radius: 100%;
}

ステップ2：口を作成する

我々は、口が我々の前の部門の中で新しいdivをつくる必要があるように、顔の上にいて欲しいです

<div class="face">
  <div class="mouth"></div>
</div>

mouth {
  position: absolute;
  background-color: black;
  width: 215px;
  height: 90px;
  border-radius: 7px 7px 100px 100px;
  top: 250px;
  left: 90px;
} 

ステップ3：目を作成する

目に移る
両方の目が同じセクションにあるように、私は目のためにdivをつくりました.ITDSも簡単に移動することができます.
目:

<div class="face">
  <div class="mouth"></div>
  <div class="eye-section"></di>
</div>

.eye-section {
/*   added border just to see the where the eye section is. We'll remove it later. */

  border: solid red 2px;
  width: 275px;
  height: 100px;
  position: absolute;
  left: 60px;
  top: 70px;
}

目をつくる

<div class="face">
  <div class="mouth"></div>
  <div class="eye-section">
    <div class="left-eye"></div>
    <div class="right-eye"></div>
  </di>
</div>

.left-eye, .right-eye {
  background-color: #4f2103;
  width: 52px;
  height: 65px;
  border-radius: 50px;
  position: absolute;
  top: 25px;
}

.right-eye {
  right: 20px;
}

ステップ4：作成

そして最後に擬似要素を持つ生徒を作ります.

.left-eye::before, .right-eye::before {
  content: "";
  display: block;
  background-color: white;
  width: 23px;
  height: 23px;
  border-radius: 100px;
  position: absolute;
  top: 20px;
  left: 10px
}

そして、現在、あなたはされます.
ここにCodepenがあります
このシンプルで簡単なCSSアートが好きです