cssを使用してハートを描く方法

褒め言葉や褒め言葉の使用をキャンセルするシーンなど、ハートのパターンによく遭遇します.従来の使用形態は、domにimgまたはbackgroundImageとして挿入されたピクチャアクセスであった.今自分でcssでハート型の図案を描きます.

ハート形

dom元素を以下のように準備し、idにheartの値を付与する.

<div id="heart">div>

幅の高さを追加

#heart {
    position: relative;
    width:50px;
    height:40px;
}

今は幅50px、高さ40pxの矩形で、走っていないはずです.擬似要素の操作を開始します

/*         ...*/

#heart:before,
#heart:after{
  position: absolute;
  left:0;
  top:0;
  content: '';
  width: 25px;
  height: 40px;
  background: red;
  border-radius: 20px 20px 0 0;
}
#heart:after {
  content: '';
  left: 25px;
  top:0
}

emmm... 形は説明できませんが、上図にしましょうか、それとも...今までの形はこんな感じだったはずです.
次に、beforeとafterの2つの内容を回転させます.コードは次のとおりです.

#heart:before,
#heart:after{
  position: absolute;
  left:25px;
  top:0;
  content: '';
  width: 25px;
  height: 40px;
  background: red;
  border-radius: 40px 40px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
#heart:after {
  content: '';
  left: 0;
  top:0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

上図上図...
効果が出ました.読んでくれてありがとう.
ソースコードはここにあるか、私のブログにアクセスします.