HTML,CSSだけでハートを作ってみた

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

完成したハートの構造

ハートの形はCSSのみで描画され、2つの円弧と1つの四角形を回転させることで実現しています。以下は具体的な手順とCSSの解説です。

HTML & CSSコード

<style>
.container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}
.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%;
}
</style>
<div class="container">
  <div class="heart"></div>
</div>

解説

1. <div class="heart">:

このdivがハートのベースとなります。widthとheightでハートの大きさを決定しています。

2. ::beforeと::after疑似要素:

• 2つの疑似要素を使って、ハートの上部に丸みを持たせています。
• 両方ともborder-radius: 50px 50px 0 0;というプロパティを使用して、丸みを帯びた部分を作成しています。

3. transformプロパティ:

• .heart::beforeでは、ハートの右側を描画するためにrotate(-45deg)で左に回転させています。
• .heart::afterでは、左側を描画するためにrotate(45deg)で右に回転させています。

4. transform-origin:

• このプロパティで回転の基点を調整し、きれいな形になるように配置しています。
• 0%: 要素の横軸（X軸）の基点を指定しています。ここでは、要素の左端（0%）を基点にしています。
• 100%: 要素の縦軸（Y軸）の基点を指定しています。ここでは、要素の下端（100%）を基点にしています。
• これにより、要素は左下の角を中心にして回転するようになります。

カスタマイズ

• サイズ変更: widthとheightの値を調整することで、ハートの大きさを変えることができます。
• 色の変更: background-colorを変更すれば、ハートの色を自由にカスタマイズ可能です。

まとめ

このコードを使用することで、CSSだけでシンプルかつきれいなハート形を描画することができます。::beforeと::afterの疑似要素を活用することで、わずかなコードで高度な形状を作成することができるのが魅力です。