摘要：HTML的標簽都比較簡單，入門非常的迅速，但是CSS是一個需要我們深度挖掘的東西，里面的很多樣式屬性掌握幾個常用的便可以實現很好看的效果，下面我便教大家如何用CSS做一個愛心。
前期預備知識：
- 明白正方形的畫法。
- 明白圓形的畫法。
- 明白什么是定位。
- 明白怎么旋轉。
話不多說，先教大家怎么用css畫一個圓形。
.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; }
做完這些的效果已經基本上出來了，但是我們還需要調整一下愛心的角度，這時就需要用到我們css樣式中的transform中的rotate屬性了。
我們由於需要把三個div都旋轉角度，所以我們把這三個div放在一個div里面。具體代碼如下：
.main{ transform: rotate(45deg); margin: 300px; }
做到現在，我們的愛心就已經做出來咯。效果圖如下：
全部代碼如下（包含HTML代碼和CSS代碼）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <link href="css/square.css" rel="stylesheet" type="text/css"> 6 <title></title> 7 </head> 8 <body> 9 <div class="main"> 10 <div class="disc1"></div> 11 <div class="disc2"></div> 12 <div class="square"></div> 13 </div> 14 </body> 15 </html>
1 *{ 2 margin: 0px; 3 padding: 0px; 4 } 5 .main{ 6 transform: rotate(45deg); 7 margin: 300px; 8 } 9 .disc1{ 10 width: 100px; 11 height: 100px; 12 border:1px solid red; 13 background-color: red; 14 margin:300px 0px 0px 300px; 15 border-radius:100%; 16 float:left; 17 } 18 .disc2{ 19 width: 100px; 20 height: 100px; 21 border:1px solid red; 22 background-color: red; 23 margin:250px 0px 0px 0px; 24 border-radius:100%; 25 float:left; 26 position: relative; 27 right: 50px; 28 } 29 .square{ 30 width: 100px; 31 height: 100px; 32 border:1px solid red; 33 background-color: red; 34 margin: 300px 0px 0px 0px; 35 float: left; 36 position: relative; 37 right: 152px; 38 }
歡迎大家在評論區留言。