CSSだけでハート形を作る方法

はじめに

Webサイトでハート形を表示したいとき、画像やアイコンフォントを使うのが一般的です。しかし、CSSだけでも美しいハート形を描画することができます。

この記事では、::beforeと::afterの疑似要素を利用して、シンプルなハート形を作成する方法を紹介します。

完成したハート

以下が完成したハートです。CSSのみで描画されており、2つの円弧を回転させることで実現しています。

プレビュー

HTML

<div class="demo-heart"></div>

CSS

.demo-heart {
  position: relative;
  width: 100px;
  height: 100px;
}

.demo-heart::before,
.demo-heart::after {
  content: '';
  position: absolute;
  top: 10px;
  width: 50px;
  height: 80px;
  background-color: #ff4757;
  border-radius: 50px 50px 0 0;
}

.demo-heart::before {
  left: 50px;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.demo-heart::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

仕組みの解説

ハートの形は、2つの縦長の楕円（上部が丸い長方形）を45度ずつ逆方向に回転させることで作られています。

ポイントは以下の3つです：

1. **疑似要素で2つのパーツを作成**
::beforeと::afterで、ハートの左右のパーツを作成します。

2. **border-radiusで上部を丸く**
border-radius: 50px 50px 0 0; で、要素の上部だけを丸くしています。

3. **transform-originで回転の基点を調整**
回転の基点を下端に設定することで、ハートの尖った部分がきれいに合わさります。

HTMLコード

<div class="heart"></div>

CSSコード

.heart {
  position: relative;
  width: 100px;
  height: 100px;
}

.heart::before,
.heart::after {
  content: '';
  position: absolute;
  top: 10px;
  width: 50px;
  height: 80px;
  background-color: red;
  border-radius: 50px 50px 0 0;
}

.heart::before {
  left: 50px;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.heart::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

各プロパティの役割

position: relative

親要素を基準点として設定。疑似要素のposition: absoluteが親要素を基準に配置されるようになります。

border-radius

50px 50px 0 0 で上部の左右のみを丸くしています。これにより縦長の半円形ができます。

transform: rotate

::beforeは-45度、::afterは45度回転させることで、V字型に配置します。

transform-origin

回転の基点を設定。0 100%は左下、100% 100%は右下を基点にします。これにより尖った部分がきれいに合わさります。

カスタマイズ

このハートは簡単にカスタマイズできます。

**サイズを変更する場合**
widthとheightの値を変更します。疑似要素のサイズも比率を保って調整してください。

**色を変更する場合**
background-colorの値を変更するだけです。グラデーションを使うこともできます。

カラーバリエーション

background-colorを変更するだけで、様々な色のハートを作成できます。

プレビュー

HTML

<div style="display: flex; gap: 20px;">
  <div class="demo-heart demo-heart--pink"></div>
  <div class="demo-heart demo-heart--purple"></div>
  <div class="demo-heart demo-heart--gradient"></div>
</div>

CSS

.demo-heart--pink::before,
.demo-heart--pink::after {
  background-color: #ff6b9d;
}

.demo-heart--purple::before,
.demo-heart--purple::after {
  background-color: #a855f7;
}

.demo-heart--gradient::before,
.demo-heart--gradient::after {
  background: linear-gradient(135deg, #ff6b9d 0%, #ff4757 100%);
}

まとめ

CSSの疑似要素を活用することで、画像を使わずにハート形を描画できます。

このテクニックは、ハート以外にも様々な形状に応用できます。::beforeと::afterを組み合わせることで、わずかなコードで複雑な形状を作成できるのがCSSの魅力です。

ぜひ、色やサイズをカスタマイズして、自分のプロジェクトに活用してみてください。