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

どうも7noteです。フォントの♥では面白くないので、CSSでオリジナルハートを作ります。

CSSだけでできちゃうハートの作り方です。
正直な話、使いどころはあまり思いつかないですが、結構自由に作ることができると思うので
画像じゃなくCSSの勉強として取り組んでみるのはアリかなと思います。

ハートの作り方

index.html

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

style.css

.heart {
  width: 100px;  /* 正方形を作る */
  height: 100px; /* 正方形を作る */
  position: relative;/* 基準位置とする */
}
.heart::before,
.heart::after {
  content: "";  /* 疑似要素に必須 */
  width: 50%;   /* ハートの丸い部分の大きさにかかわる */
  height: 80%;  /* ハートの高さにかかわる */
  background: #E0548E; /* ハートの色 */
  border-radius: 25px 25px 0 0; /* ハートの半円を生成 */
  display: block; /* ブロック要素にする */
  position: absolute; /* 相対位置に指定 */
}
.heart::before {
  transform: rotate(-45deg); /* 左に回転 */
  left: 14%;                 /* 左からの位置を指定 */
}
.heart::after {
  transform: rotate(45deg);  /* 右に回転 */
  right: 14%;                /* 右からの位置を指定 */
}

解説

上部が半円の長方形を2つ、

こいつを回転させて、

フュージョン！！

完成。

まとめ

CSSに慣れてくれば結構様々な形が作れるようになります。
まぁCSSで作る必要のないものも多いですが、いろいろな形を作れるということはそれだけCSSのプロパティを使いこなせているという自信にもつながるのでぜひ思いついたものをCSSで作ってみたりしてください。結構楽しいです。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ