純 CSS 愛心繪畫方式

前言

由於在製作 Vue 出一個女友的練習發現有一個 CSS 不會寫,所以這邊紀錄一下該如何用 CSS 寫出一個愛心~

起手式

首先在建立一個愛心之前我們要先建立一個 DOM 元素

1
<div class="heart"></div>

研究愛心

首先透過網路上所提供的方向大多都是使用的 boder-radius 、偽元素並搭配定位 + CSS3 來達成,所以一開始會這樣子,先弄出一個長條

接下來就是使用 border-radius

接下來這邊我不使用偽元素來製作,使用兩個 DOM 製作,並且調整 CSS 結構,所以最終結果就在這裡

結尾

當然也可以使用偽元素,使用偽元素在 HTML 上也會比較漂亮,所以最後也附上偽元素版本

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下拍手,過程你只需要登入,如果你願意按個讚,對於創作者來講是一個莫大的鼓勵與支持。

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ