[CSS文法]clip-path

標籤：三角形   shape   geo   頂點   運用   triangle   路徑   reg   參考   

clip-path表示剪裁路徑，也就是從某個物體上剪下一塊內容。比如在圖片上根據需要剪下一部分需要留下的地區。

這裡涉及到兩個概念: 裁剪路徑clipping path，裁剪地區clipping region。

裁剪路徑就是用來裁剪元素的路徑，標記了需要裁剪的地區。可以是任意形狀。

裁剪地區就是裁剪路徑閉合後所包含的全部地區。

瀏覽器會裁剪掉裁剪地區以外的內容，包括: 背景，內容，邊框，陰影等，另外也不會捕獲裁剪地區之外的hover click等事件。

clip-path文法

clip-path: <clip-source>|[<basic-shape>||<geometry-box>]|none

clip-source 可以是內部，外部的SVG的clipPath元素的URL引用

basic-shape使用一些基本形狀函數建立的一個形狀 circle() ellipse()  inset()  polygon()

geometry-box選擇性參數，和basic-shape一起使用，可以為其裁剪工作提供參考盒子。

瀏覽器首碼 -webkit-

注意:

使用clip-path繪製形狀要從同一個方向進行繪製，如果是順時針就一律順時針。

 

樣本一

使用polygon來繪製菱形

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

polygon指定了四個頂點。XY座標軸分別規定X軸正方向向右，Y軸正方向向下。

 

樣本二

使用geometry-box來裁剪元素

geometry-box一共有7個值，分別是margin-box, border-box, padding-box, content-box, fill, stroke, view-box等

其中fill stroke view-box是運用在SVG元素上的

margin-box, border-box, padding-box, conent-box是運用在HTML元素上的

例如 clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) margin-box

 

CSS clip-path maker提供了很多常用clip-path

bennettfeely.com/clippy/

1. Triangle 三角形

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

2. Rhombus 菱形

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

 

[CSS文法]clip-path