[CSS] ハートの形（borderでもOK）

こんにちは、素人エンジニアです。

cssだけで、ハートを作りました。

borderで作るハートも紹介しています。

ぜひ、コピペで使ってください！

ハートのサンプル
ステップ１：四角形を3つ重ねて、45度回転！
ステップ2：疑似要素を半円にする
ステップ3：背景を消して、枠線を加える
ステップ4：不要な枠線を消して位置を微調整

ハートのサンプル

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

.heart-shaped {
  position: relative;
  margin: 20% auto;
  width: 100px;
  height: 100px;
  border: 5px solid red;
  border-top: 1px solid transparent;
  border-left: 1px solid transparent;
  transform: rotate(45deg);
}

.heart-shaped::before {
  content: "";
  position: absolute;
  top: -60%;
  width: 95%;
  height: 60%;
  border: 5px solid red;
  border-bottom: 1px solid transparent;
  border-radius: 50% 50% 0 0 / 80% 80% 0 0;
}

.heart-shaped::after {
  content: "";
  position: absolute;
  left: -60%;
  width: 60%;
  height: 95%;
  border: 5px solid red;
  border-right: 1px solid transparent;
  border-radius: 80% 0 0 80% / 50% 0 0 50%;
}

ステップ１：四角形を3つ重ねて、45度回転！

まずは、疑似要素のbeforeとafterを使って、四角形を3つ重ねます。
そして、transform: rotate(45deg);を加えて、全体を回転させます。

.step1 {
  position: relative;
  margin: 20% auto;
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg);
}

.step1:before {
  content: "";
  position: absolute;
  top: -60%;
  width: 100%;
  height: 60%;
  background-color: gray;
}

.step1::after {
  content: "";
  position: absolute;
  left: -60%;
  width: 60%;
  height: 100%;
  background-color: gray;
}

ステップ2：疑似要素を半円にする

上にくっつけた疑似要素を半円にすれば、もうハートの完成です。

.step2 {
  position: relative;
  margin: 20% auto;
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg);
}

.step2:before {
  content: "";
  position: absolute;
  top: -60%;
  width: 100%;
  height: 60%;
  background-color: gray;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.step2::after {
  content: "";
  position: absolute;
  left: -60%;
  width: 60%;
  height: 100%;
  background-color: gray;
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
}

半円の作り方は、こちらの記事をご覧ください。

[CSS] 半円の作り方

こんにちは、素人エンジニアです。 cssだけを使って半円を作る方法を紹介しています。コピペで使ってください！

ステップ3：背景を消して、枠線を加える

塗りつぶすタイプのハートであればステップ３で完成なのですが、ハートの縁取りをするのでborderを指定します。borderを指定すると、枠線の太さ分ズレが生じます。

.step3 {
  position: relative;
  margin: 20% auto;
  width: 100px;
  height: 100px;
  border: 5px solid red;
  transform: rotate(45deg);
}

.step3:before {
  content: "";
  position: absolute;
  top: -60%;
  width: 100%;
  height: 60%;
  border: 5px solid gray;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.step3::after {
  content: "";
  position: absolute;
  left: -60%;
  width: 60%;
  height: 100%;
  border: 5px solid gray;
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
}

ステップ4：不要な枠線を消して位置を微調整

縁取りに必要ない枠線はtransparentで消していきます。

枠線の太さ分ズレが生じていますので、そのズレを微調整していきます。widthとheightを小さくするのですが、半円も少し歪みます。そのため、border-radiusも調整していきます。

これで、borderで作るハートも完成です！

.step4 {
  position: relative;
  margin: 20% auto;
  width: 100px;
  height: 100px;
  border: 5px solid red;
  border-top: 1px solid transparent;
  border-left: 1px solid transparent;
  transform: rotate(45deg);
}

.step4::before {
  content: "";
  position: absolute;
  top: -60%;
  width: 95%;
  height: 60%;
  border: 5px solid gray;
  border-bottom: 1px solid transparent;
  border-radius: 50% 50% 0 0 / 80% 80% 0 0;
}

.step4::after {
  content: "";
  position: absolute;
  left: -60%;
  width: 60%;
  height: 95%;
  border: 5px solid gray;
  border-right: 1px solid transparent;
  border-radius: 80% 0 0 80% / 50% 0 0 50%;
}

大きさやborderの太さを変えると、少しずれるかもしれません。その都度、微調整してお使いください。

また、CSSだけで作るしずくの形（雨粒の形）についても解説しています。
興味があれば、ぜひご覧ください。

[CSS] しずくの形（雨粒の形）

こんにちは、素人エンジニアです。 cssだけで、しずくの形を作りました。コピペで使ってください。

以上！