在CSS中打愛心可以使用偽元素來實現,主要是利用:before和:after兩個偽元素來制作,下面是詳細的方法:
.heart { position: relative; width: 30px; height: 26px; } .heart:before, .heart:after { position: absolute; content: ""; left: 15px; top: 0; width: 15px; height: 24px; background: red; border-radius: 15px 15px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; } .heart:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; }
上面的代碼中`.heart`是代表愛心的元素,`::after`和`::before`是偽元素,`content`屬性可填充任意內容。`left`和`top`屬性控制偽元素的位置,顏色可以根據需要修改。`transform`屬性控制偽元素的形狀和傾斜度,`transform-origin`屬性控制變形的中心點。
最后,在HTML中使用`
`即可呈現一個可愛的愛心,如下:<div class="heart"></div>
上一篇css 怎么讓屏幕自適應
下一篇css 怎么更改圖標顏色