首頁 > 文章 > web前端 > css怎麼實現心形

css怎麼實現心形

青灯夜游原創: 2021-07-22 15:23:425056瀏覽

css實現心形的方法：首先利用「border-radius:100%」樣式畫兩個正圓；然後進行定位，將兩個圓重合一部分；接著畫一個正方形，進行定位，將正方形與兩個圓重合一部分，形成傾斜的心形；最後使用transform樣式調整愛心角度。

css怎麼實現心形

本教學操作環境：windows7系統、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怎麼實現心形

由於我們的愛心是由兩個圓和一個正方形組成的，所以我們還需要再來一個圓形。

.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怎麼實現心形

第三步我們就需要做一個正方形了。

.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樣式中的transform中的rotate屬性了。

我們由於需要把三個div都旋轉角度，所以我們把這三個div放在一個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>

（學習影片分享：css影片教學）

以上是css怎麼實現心形的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css背景圖片顏色怎麼設定下一篇：css背景圖片顏色怎麼設定

看更多