CSSclippath使用技巧

歡迎大家在這裡學習CSSclippath使用!這裡是我們給大家整理出來的精彩內容。我相信，這些問題也肯定是很多朋友在關心的，所以我就給大家談談這個!

clip-path 是工作草案的一部分，它是一個通過屏蔽和裁減來隱藏元素的一部分的工具。盡管clip-path沒有被主流的浏覽器支持(包括IE和Firefox)，但在webkit浏覽器中，它仍然是一個實現時尚效果的小工具。

注意，在現代浏覽器中需要使用-webkit-前綴。

clip-path 簡單的工作原理是提供一系列的X和Y值來創建路徑。當使用這些值創建一條完整路徑時，就會把圖像按照路徑內部的尺寸進行裁剪。

利用clip-path，我們可以創建圓形、橢圓和多邊形等不同的形狀，創造力是唯一的限制。

一個簡單的三角形裁減

View the code on codepen

對元素簡單地運用clip-path就能實現上面的效果：

CSS Code復制內容到剪貼板

.clipClass {

-webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);

}

逐步分析

很像定位屬性，我們需要考慮X值和Y值。X:0和Y:0表示從元素的左上角開始，並從左上角開始移動。X:100%指的是元素右邊，Y:100%指的是元素底部。

對於上面創建的路徑，實際是創建了如下的點：

CSS Code復制內容到剪貼板

x: 0, y:100%

x: 50%, y: 0

x: 100%, y: 100%

這個簡單路徑開始於左下角，水平移動50%，並到達頂部位置，然後又水平移動到100%的位置，垂直向下回到底部，到達第三個坐標點。三角形就出來了。

好了，CSSclippath使用內容就給大家介紹到這裡了。希望大家繼續關注我們的網站!

相關推薦：

CSSRGB顏色介紹