ホームページ > 記事 > ウェブフロントエンド > CSSでハートの形を実現する方法
CSSでハートの形を実現する方法
- 青灯夜游オリジナル
- 2021-07-22 15:23:425050ブラウズ
CSS でハートの形を実現する方法: まず、「border-radius:100%」スタイルを使用して 2 つの正円を描き、次に位置を決めて 2 つの円を部分的に重ね、次に正方形を描き、位置を決めます。 、および正方形が 2 つの円に部分的に重なり、傾いたハートの形を形成します。最後に、変換スタイルを使用してハートの角度を調整します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
予備知識:
正方形の描き方を理解する。
円の描き方を理解する。
ポジショニングとは何かを理解します。
回転方法を理解します。
さっそく、CSS を使用して円を描く方法を説明しましょう。
.disc1{
width: 100px;
height: 100px;
border:1px solid red;
background-color: red;
margin:300px 0px 0px 300px;
border-radius:100%;
float:left;
}
私たちの愛は 2 つの円と 1 つの四角形で構成されているため、もう 1 つの円が必要です。
.disc2{
width: 100px;
height: 100px;
border:1px solid red;
background-color: red;
margin:250px 0px 0px 0px;
border-radius:100%;
float:left;
position: relative;
right: 50px;
}
3 番目のステップでは、正方形を作成する必要があります。
.square{
width: 100px;
height: 100px;
border:1px solid red;
background-color: red;
margin: 300px 0px 0px 0px;
float: left;
position: relative;
right: 152px;
}
これで大体の効果は出てきましたが、愛の角度を調整する必要があります。このとき、トランスフォームを使用する必要があります。 CSS スタイル、rotate 属性。
3 つの div すべてを回転する必要があるため、これら 3 つの div を 1 つの div に入れます。具体的なコードは次のとおりです。
.main{
transform: rotate(45deg);
margin: 300px;
}もう、私たちの愛は結ばれています。レンダリングは次のとおりです。
すべてのコードは次のとおりです (HTML コードと CSS コードを含む)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
*{
margin: 0px;
padding: 0px;
}
.main{
transform: rotate(45deg);
margin: 300px;
}
.disc1{
width: 100px;
height: 100px;
border:1px solid red;
background-color: red;
margin:300px 0px 0px 300px;
border-radius:100%;
float:left;
}
.disc2{
width: 100px;
height: 100px;
border:1px solid red;
background-color: red;
margin:250px 0px 0px 0px;
border-radius:100%;
float:left;
position: relative;
right: 50px;
}
.square{
width: 100px;
height: 100px;
border:1px solid red;
background-color: red;
margin: 300px 0px 0px 0px;
float: left;
position: relative;
right: 152px;
}
</style>
</head>
<body>
<div class="main">
<div class="disc1"></div>
<div class="disc2"></div>
<div class="square"></div>
</div>
</body>
</html>(学習ビデオの共有: cssビデオチュートリアル）
以上がCSSでハートの形を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。