CSS 新屬性 clip-path，意味裁剪路徑的意思，讓我們可以很便捷的生成各種幾何圖形。
clip-path 通過定義特殊的路徑，實現我們想要的圖形。而這個路徑，正是 SVG 中的 path 。
1、 簡介
初始值：none
適用元素：所有元素；在SVG中，不適用於defs（動畫）元素和所有的graphics（畫圖）元素。
繼承性：無
計算值：指定值，url需要絕對值
動畫性：指定的基礎圖形才有 --> inset(), circle(), ellipse(), polygon()
★更多詳細的信息請移步這里》》
2、語法
/* Keyword values */
clip-path: none;
/* Image values */
clip-path: url(resources.svg#c1);
/* Box values
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
/* Geometry values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
/* Box and geometry values combined */
clip-path: padding-box circle(50px at 0 100px);
/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;
3、兼容性
在特定的瀏覽器下需要添加前綴 -webkit- 。
4、例子--繪制三角形
-webkit-clip-path: polygon(50% 0,0 100%, 100% 100%); clip-path: polygon(50% 0,0 100%, 100% 100%);
在這里先拋出一個例子方便理解，利用clip-path繪制一個三角形，每個點用逗號分開，數值（50%，0）可以理解為坐標（x，y）
三個點形成一個閉合區域，這也是頁面所顯示出來的區域，形成遮罩的效果
三角形繪制的大概的坐標模型，起點為元素的左上角，所以形成的是一個向下發展的坐標系
像我這種對坐標頭大的同學，可以利用在線生成器，來制作一些常用的圖形，可以說是非常方便了~
.clip1{ -webkit-clip-path: polygon(50% 0,0 100%, 100% 100%); clip-path: polygon(50% 0,0 100%, 100% 100%); } .clip2{ -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); } .clip3{ -weblit-clip-path:ellipse(25% 40% at 50% 50%); clip-path:ellipse(45% 40% at 50% 50%); } .clip4{ -webkit-clip-path:inset(10% 10% 10% 10%); clip-path:inset(10% 10% 10% 10%); } .clip5{ -webkit-clip-path: inset(25% 0 25% 0 round 0 25% 0 25%); clip-path: inset(25% 0 25% 0 round 0 25% 0 25%); } .clip6{ -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } .clip7{ -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); } .clip8{ -webkit-clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%); clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%); }
5、clip-path過渡動畫
clip-path 另外一個強大之處在於可以進行 CSS transtion 與 CSS animation，也就是過渡和動畫。
多邊形圖形過渡
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>clip-path動畫-多邊形</title> <style> .polygon-animate { position: absolute; width: 200px; height: 200px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: crimson; transition: .3s; clip-path: polygon( 50% 0%, 0% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100% ); animation: polygon-ani 5s linear infinite; } @keyframes polygon-ani { 20% { background-color: darkorange; clip-path: polygon( 50% 0%, 100% 50%, 50% 100%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50% ); } 40% { clip-path: polygon( 50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%, 0% 38%, 0% 38%, 0% 38%, 0% 38% ); } 60% { background-color: lemonchiffon; clip-path: polygon( 50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%, 0% 25%, 0% 25%, 0% 25% ); } 80%,100% { clip-path: polygon( 50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%, 10% 20%, 10% 20% ); } } </style> </head> <body> <div class="polygon-animate"></div> </body> </html>
圖形變換動畫
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>clip-path</title> <style type="text/css"> .triangle2rect { position: absolute; width: 100px; height: 100px; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: aniContainer 2s infinite alternate; } .triangle2rect div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .a { background: #99cccc; clip-path: polygon(0% 0%, 0% 100%, 50% 50%); animation: a 2s infinite alternate; } .b { background: #99cccc; clip-path: polygon(0% 0%, 100% 0%, 50% 50%); animation: b 2s infinite alternate; } .c { background: #99cccc; clip-path: polygon(100% 0%, 100% 100%, 50% 50%); animation: c 2s infinite alternate; } .d { background: #99cccc; clip-path: polygon(100% 100%, 0% 100%, 50% 50%); animation: d 2s infinite alternate; } @keyframes a { 0%, 10% { background: #99cccc; clip-path: polygon(0% 0%, 0% 100%, 50% 50%); } 90%, 100% { background: #000; clip-path: polygon(0% 100%, 25% 100%, 12.5% 0%); } } @keyframes b { 0%, 10% { background: #99cccc; clip-path: polygon(0% 0%, 100% 0%, 50% 50%); } 90%, 100% { background: #000; clip-path: polygon(25% 0%, 50% 0%, 37.5% 100%); } } @keyframes c { 0%, 10% { background: #99cccc; clip-path: polygon(100% 0%, 100% 100%, 50% 50%); } 90%, 100% { background: #000; clip-path: polygon(62.5% 0%, 75% 100%, 50% 100%); } } @keyframes d { 0%, 10% { background: #99cccc; clip-path: polygon(100% 100%, 0% 100%, 50% 50%); } 90%, 100% { background: #000; clip-path: polygon(100% 0%, 87.5% 100%, 75% 0%); } } @keyframes aniContainer { 0%, 10% { width: 100px; height: 100px; } 90%, 100% { width: 250px; height: 60px; } } </style> </head> <body> <hgroup class="triangle2rect"> <div class="a"></div> <div class="b"></div> <div class="c"></div> <div class="d"></div> </hgroup> </body> </html>
6、clip-path 動畫的局限
clip-path 動畫雖然美好，但是存在一定的局限性，那就是進行過渡的兩個狀態，坐標頂點的數量必須一致。
也就是如果我希望從三角形過渡到矩形。假設三角形和矩形的 clip-path 分別為：
三角形：clip-path: polygon(50% 0, 0 100%, 100% 0)
矩形： clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
進行過渡動畫時候，直接從 polygon(50% 0, 0 100%, 100% 0) --> polygon(0 0, 100% 0, 100% 100%, 0 100%) 是不行的，因為是從 3 個坐標點變換到 4 個坐標點。
因此這里需要這用一個討巧的辦法，在三角形的表示方法中，使用四個坐標點表示，其中兩個坐標點進行重合即可。也就是：
三角形：clip-path: polygon(50% 0, 0 100%, 100% 0) -> clip-path: polygon(50% 0, 50% 0, 0 100%, 100% 0)