今日はXiaoyingがCSSで描いたハートを紹介します。コードと制作プロセスは以下の通りです。
ステップ 1:
まず正方形を描きます。図に示すように: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css画桃心</title>
<style media="screen">
.heart-body {
width: 500px;
margin: 100px auto;
position: relative;
}
.heart-shape {
position: relative;
width: 100px;
height: 100px;
background-color: #f70e0e;
}
</style>
</head>
<body>
<p class="heart-body">
<p class="heart-shape"></p>
</p>
</body>
</html> 2 番目のステップ:
は、before と :after の疑似要素を使用して、正方形の左側と上部に正方形を描画し、次にボーダーを使用します。 radius: 50%; 属性を使用して、これら 2 つの正方形を変更し、図に示すように 2 つの円を取得します。ステップ 3:
クラス名:heart-shape の p は、図に示すように、transform:rotate(45deg) 属性を使用して 45 度回転します。円と四角の色 誰もが明白な効果をよりよく見ることができるように、背景色は均一な色ではありません。 次に、Xiaoying が背景色を均一な色に設定すると、図に示すように、最終的な愛が現れます。 : 
りー
-->
以上がCSSを使用してハートを描画するためのサンプルコード共有を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
