在CSS中,制作心形可以運用到偽元素以及transform屬性。
.heart { position: relative; width: 100px; height: 90px; transform: rotate(-45deg); } .heart:before, .heart:after { content: ""; position: absolute; width: 50px; height: 80px; background-color: red; border-radius: 25px 25px 0 0; } .heart:before { transform: rotate(-45deg); top: -50px; left: 0; } .heart:after { transform: rotate(45deg); top: -50px; right: 0; }
上述代碼中,首先定義了一個class名為heart的元素,并設(shè)置其寬高以及旋轉(zhuǎn)45度的transform屬性。然后通過before和after偽元素來分別實現(xiàn)左右兩側(cè)的半個心形,給定其width、height、背景色以及border-radius屬性。再根據(jù)具體的旋轉(zhuǎn)角度和top、left、right屬性來定位。通過這樣的方式,便可制作出一個簡單的心形。