CSS Clip-path Maker

CSS Clip-path Maker - Cong Cu Tao Hinh Dang Truc Quan

Tao cac hinh dang CSS clip-path phuc tap bang cach truc quan. Cong cu nay ho tro da giac, hinh tron, elip va inset voi giao dien keo tha truc quan cho cac diem da giac. Hoan hao de tao thiet ke doc dao, mat na hinh anh va bo cuc sang tao.

CSS clip-path la gi?

CSS clip-path la thuoc tinh tao vung cat de xac dinh phan nao cua phan tu duoc hien thi. Cac phan ben ngoai vung cat se bi an.

Cac loai hinh dang:

polygon() - Hinh dang tuy chinh voi nhieu diem
circle() - Cat hinh tron
ellipse() - Cat hinh bau duc
inset() - Hinh chu nhat voi goc bo tuy chon

Lam sao de tao da giac clip-path?

Da giac clip-path su dung cac diem toa do:

Cu phap: polygon(x1% y1%, x2% y2%, ...)

Moi diem duoc xac dinh boi phan tram X va Y:
- 0% 0% = goc tren trai
- 100% 0% = goc tren phai
- 100% 100% = goc duoi phai
- 0% 100% = goc duoi trai
- 50% 0% = giua tren

Vi du tam giac:
polygon(50% 0%, 100% 100%, 0% 100%)

Circle va ellipse hoat dong nhu the nao?

Cu phap circle:
circle(ban-kinh at tamX tamY)

Vi du: circle(50% at 50% 50%)
- Tao hinh tron voi ban kinh 50%
- Tam o 50% 50% (giua)

Cu phap ellipse:
ellipse(banKinhX banKinhY at tamX tamY)

Vi du: ellipse(50% 30% at 50% 50%)
- Tao hinh bau duc
- Rong 50%, cao 30%
- Tam o giua

Inset clip-path la gi?

Inset tao vung cat hinh chu nhat voi goc bo tuy chon:

Cu phap: inset(tren phai duoi trai round ban-kinh)

Gia tri the hien khoang cach tu moi canh:
- inset(10%) - 10% tu tat ca cac canh
- inset(10% 20%) - 10% tren/duoi, 20% trai/phai
- inset(10% 20% 30% 40%) - gia tri rieng le

Goc bo:
- inset(10% round 20px) - them ban kinh vien
- inset(10% round 20%) - ban kinh phan tram

Tinh nang chinh

• 4 loai hinh dang: da giac, hinh tron, elip, inset
• Chinh sua diem keo tha truc quan
• 12 hinh da giac co san
• Them va xoa diem da giac
• Nhap so chinh xac cho tat ca gia tri
• Xem truoc truc tiep
• Dieu khien ban kinh va vi tri hinh tron
• Elip voi ban kinh X/Y doc lap
• Inset ho tro ban kinh vien
• Sao chep ma CSS
• Than thien voi thiet bi cam ung
• Xu ly 100% phia may khach
• Ho tro che do toi
• Giao dien dap ung