純 CSS 愛心繪畫方式

發表於 2019-08-03 分類於 CSS

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

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

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

前言

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

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

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

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

接下來就是使用 border-radius

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

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