ハートを描けるCSS

ふとハートのアイコンが欲しくなったのですが、入手した画像の解像度が荒かったので、

『この科学文明の世の中にハートアイコンなどCSSで書かれてるに違いない』

と思ってググってみるとやっぱりありました。

おなじみcss-tricks

http://css-tricks.com/examples/ShapesOfCSS/

ハートだけじゃなくて色んなアイコンがあるのがウレシイ。

あと、アイコン単位でCSSが独立してるので、

『bootstrapのこれだけが使いたいのに、他のクラスもついてきて既存ソースへの影響ががが！』

的な悩みも気にしなくていいのですばらしい。

で、『これでなんでハートになるんだよ』って思ったので順を追ってみてみました。

ハート描画は以下のCSSで行っているのですが、なんかぱっと見たくさん書いてあるように見えます。

#heart {
  position: relative;
  width: 100px;
  height: 90px;
}
#heart:before,
#heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  -moz-border-radius: 50px 50px 0 0;
  border-radius: 50px 50px 0 0;

  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;

}

#heart:after {
  left: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin :100% 100%;
}

ただ大半は複数種類ブラウザ対応用のベンダープレフィックスなのでそれを取り除き、これからやること用のナビゲーションコメントをふると以下のようになります。
ちなみにワタクシはchrome使ってるので-webkit-のやつで試してます。

#heart {
  // サイズ調整
  position: relative;
  width: 100px;
  height: 90px;
}
#heart:before,
#heart:after {
  // 共通部分で右半分と左半分の領域サイズを定義したり色を定義したりしてる
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  // ハートの描画ステップ1（上丸長方形）
  border-radius: 50px 50px 0 0;

  // ハートの描画ステップ2（回転中心設定）
  transform-origin: 0 100%;

  // ハートの描画ステップ3（半時計周りに回転）
  transform: rotate(-45deg);
 
}

#heart:after {
  // ハートの描画ステップ4（今までafterとbeforeの二枚重ねだったやつのafterのleftを0にすることでafterを左にずらして見えるようにする＆回転中心設定）
  left: 0;
  transform-origin :100% 100%;

  // ハートの描画ステップ5（時計回りに回転）
  transform: rotate(45deg);
}

でこれを図解したのが以下です。


………
……
…
よくかんがえるね、こんなの。
すごいです。

CSSの中身は難しくないのでradiusの値とかwidthとかcolorとか調整したら任意のハートがつくれるでしょう。
今回は以上です。

それではまた次回までごきげんよう。

追記
上の画像回転の説明が若干うさんくさい（というか間違ってる部分がある）のですが、なんとなく雰囲気（ずらして回す）は伝わると思うのでそれでユルしてください。