常遇到心形圖案，比如點讚和取消點讚的使用場景。之前的使用方式是接入，作為img或backgroundimage插入到 dom 中去。現在自己動手用css繪製乙個心形圖案。
準備乙個dom元素如下,為其id賦值為heart
id="heart">
div>
複製**
#heart
複製**
50px,高40px的矩形，沒跑了。現在開始操作偽元素
/*上一步驟的**省略...*/
#heart
:before,
#heart
:after
#heart
:after
複製**
接下來要做的是將before和after兩塊內容旋轉。**如下：
#heart
:before,
#heart
:after
#heart
:after
複製**
效果已出，感謝閱讀。
原始碼在此 或訪問 我的部落格
使用CSS繪製三角形
今天有個同學詢問了我關於使用css製作三角形的問題，我也沒有怎麼想考慮，直接給了原始碼。然後她詢問了一系列的問題，我才意識到，這類 網上一般都有，缺的是製作的原理，於是就有了編寫部落格的想法。下面我們先來看一下效果 接下來我們看一下源 下面我們來分析繪製三角形的原理 首先我們知道css是採用盒子模型...
CSS之clip path繪製多邊形
clip path表示的是裁剪路徑 語法格式 clip path none clip source 可以是內 外部的svg的元素的url引用 basic shape 使用一些基本的形狀函式建立的乙個形狀。主要包括circle ellipse inset 和polygon geometry box 是...
OPENCV繪製指定色塊的輪廓和形心
效果展示 思路是將轉化為hsv格式，然後用inrange函式變為黑白二值化影象，二值化影象有噪點時用開操作閉操作去除，用canny運算元檢測邊緣，findcontours函式尋找輪廓，再計算輪廓矩 和中心，再繪製輪廓和形心 轉化為hsv格式 圖為各種顏色的hsv值對應表 cvtcolor src,h...