HTML實現心形特別簡單,只需利用標簽結構和一些特定的CSS樣式即可實現。
<div class="heart"> <div class="left-half-heart"></div> <div class="right-half-heart"></div> </div> <style> .heart { position: relative; width: 100px; height: 100px; } .left-half-heart, .right-half-heart { position: absolute; top: 0; width: 50px; height: 80px; border-radius: 50px 50px 0 0; background-color: red; transform: rotate(-45deg); } .left-half-heart { left: 0; } .right-half-heart { left: 50px; border-radius: 50px 50px 0 0; transform: rotate(45deg); } </style>
上述代碼首先創建了一個div元素,并添加名為“heart”的類,該div元素用于包含兩個半個心形元素。
然后,通過在樣式表中使用名為“.left-half-heart”和“.right-half-heart”的兩個類在元素中添加兩個半個心形。這些類定義了半個心形的特定樣式,例如背景顏色,大小和位置。
最后使用transform屬性沿著一個45度角度向外旋轉半個心形。