HTMLとCSSだけで、絵を描けるのをご存知ですか？
今回は、「赤いハート」の描き方をご紹介します。
CSSの `::before` や `::after` を使い、`border-radius` を活用してハートの形を作成します。
赤いハートを描く (HTML + CSS)
＜解説＞
1. ハートのメイン部分 (`.heart`)
- `width: 100px; height: 100px; background-color: red;` で四角形を作成。
- `transform: rotate(-45deg);` で45度回転させる。
2. 丸い部分 (`::before` と `::after`)
- `border-radius: 50%;` で円を作る。
- `position: absolute;` で `.heart` の位置を基準に配置。
- `top: -50px; left: 0;` (左上) と `top: 0; left: 50px;` (右上) で左右に配置。
このコードをブラウザで開くと、CSSだけで作成した赤いハートが表示されます 。
サイズや色を変更すれば、オリジナルのハートデザインも作れますよ！
WEBは奥が深くて面白いですね！
試してみてくださいね。
・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・
【PR】
#WEBクリエイター #WEB #WEBデザイン #WEBデザイナー #コーディング #在宅ワーク #WEB資格