css3的clip-path方法剪裁實現（三角形，多邊形，圓，橢圓）

本例講解如何通過clip-path把一個div（元素，可以是圖片等）裁切成不同的形狀，這裏以一個div為例寬高均為300px
注意：不支持IE和Firefox，支持webkit瀏覽器，在現代瀏覽器中需要使用-webkit-前綴。

<div class="demo" style="width: 300px; height: 300px; margin: auto; background: red;">
		</div>

1.裁切為一個三角形或者梯形 使用：polygon裁剪多邊形。

.demo{
				-webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
			}

剪切梯形：坐標順序為，右上、右下，左下，左上

.demo{
				-webkit-clip-path: polygon(100% 0,75% 100%, 25% 100%, 0 0);
			}

2.裁切圓 ：創建圓形，需要給circle傳入三個值：半徑和圓心坐標（x y），用at關鍵字來定義圓心坐標。

.demo{
				-webkit-clip-path: circle(50% at 50% 50%);
			}

3.裁切橢圓：創建橢圓，需要給ellipse傳入四個值：橢圓的x軸半徑、y軸半徑以及橢圓圓心(x y)。

.demo{
				-webkit-clip-path: ellipse(30% 20% at 50% 50%);
			}

4.再說下裁切的：矩形裁切，邊緣裁切用到的 inset（對應的是距上，距右，距下，距左的位置）

.demo{
				-webkit-clip-path: inset(100px 50px 50px 50px);
			}

小實例：裁切一個圓角 inset(<top> <right> <bottom> <left> round <top-radius> <right-radius><bottom-radius> <left-radius>)

-webkit-clip-path: inset(25% 0 round 0 25%);

創作打卡挑戰賽


贏取流量/現金/CSDN周邊激勵大獎