CSSでハートの形を実現する方法-CSSチュートリアル-php.cn

CSSでハートの形を実現する方法

青灯夜游

リリース： 2023-01-07 11:45:06

オリジナル

5200 人が閲覧しました

CSS でハートの形を実現する方法: まず、「border-radius:100%」スタイルを使用して 2 つの正円を描き、次に位置を決めて 2 つの円を部分的に重ね、次に正方形を描き、位置を決めます。、および正方形が 2 つの円に部分的に重なり、傾いたハートの形を形成します。最後に、変換スタイルを使用してハートの角度を調整します。

CSSでハートの形を実現する方法

このチュートリアルの動作環境: 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;
}

ログイン後にコピー

CSSでハートの形を実現する方法

私たちの愛は 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;
}

ログイン後にコピー

CSSでハートの形を実現する方法

3 番目のステップでは、正方形を作成する必要があります。

.square{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin: 300px 0px 0px 0px;
    float: left;
    position: relative;
    right: 152px;
}

ログイン後にコピー

2-CSSでハートの形を実現する方法

これで大体の効果は出てきましたが、愛の角度を調整する必要があります。このとき、トランスフォームを使用する必要があります。 CSS スタイル、rotate 属性。

3 つの div すべてを回転する必要があるため、これら 3 つの div を 1 つの div に入れます。具体的なコードは次のとおりです。

.main{
    transform: rotate(45deg);
    margin: 300px;
}

ログイン後にコピー

もう、私たちの愛は結ばれています。レンダリングは次のとおりです。

CSSでハートの形を実現する方法

すべてのコードは次のとおりです (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>