如何使用 css 繪製心形
摘要：
常遇到心形圖案，比如點贊和取消點讚的使用場景。之前的使用方式是圖片接入，作為 img 或 backgroundImage 插入到 dom 中去。現在自己動手用css繪製一個心形圖案。
心形
準備一個 dom 元素如下,為其 id 賦值為 heart
<div id=&...
常遇到心形圖案，比如點贊和取消點讚的使用場景。之前的使用方式是圖片接入，作為 img 或 backgroundImage 插入到 dom 中去。現在自己動手用css繪製一個心形圖案。
心形
準備一個 dom 元素如下,為其 id 賦值為 heart
<div id="heart"></div> 複製程式碼
新增寬高
#heart {
position: relative;
width:50px;
height:40px;
}
複製程式碼
現在它應該是一個寬 50px ,高 40px 的矩形，沒跑了。現在開始操作偽元素
/*上一步驟的程式碼省略...*/
#heart:before,
#heart:after{
position: absolute;
left:0;
top:0;
content: '';
width: 25px;
height: 40px;
background: red;
border-radius: 20px 20px 0 0;
}
#heart:after {
content: '';
left: 25px;
top:0
}
複製程式碼
emmm... 形狀無法描述，上圖吧還是...到現在為止的形狀應該是這個樣子的。
接下來要做的是將 before 和 after 兩塊內容旋轉。程式碼如下：
#heart:before,
#heart:after{
position: absolute;
left:25px;
top:0;
content: '';
width: 25px;
height: 40px;
background: red;
border-radius: 40px 40px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
#heart:after {
content: '';
left: 0;
top:0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
複製程式碼
上圖上圖...
效果已出，感謝閱讀。
原始碼在此 或訪問我的部落格