CSS中的clip-path区域裁剪属性使用教程

1. .haorooms-small {   
2.     background-size: cover;   
3.     width: 300px;   
4.     height: 300px;   
5.     -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);   
6.     clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);   
7. }  

clip-path的inset属性应用

1. 
   
     
2. .clip-me {     
3.     
4.   clip-path: inset(10px 20px 30px 40px);   
5.     
6. }  

在clip-path的属性值中的inset()函数中有四个值，分别表达着top/left和bottom/right四个点，圈出一个矩形面积。这个矩形面积外的部分都将被裁剪隐藏掉。

clip-path的其他属性应用

1. .clip-me {    
2.   
3.     
4.   clip-path: url(#c1);    
5.   
6.     
7.   clip-path: url(path.svg#c1);   
8.   
9.     
10.   clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);   
11.   
12.     
13.   clip-path: circle(30px at 35px 35px);   
14.   
15.     
16.   clip-path: ellipse(65px 30px at 125px 40px);   
17.   
18.     
19.     
20.   
21.     
22.   clip-path: inset(10% 10% 10% 10% round 20%, 20%);   
23.   
24. }  

SVG 裁剪路径样例：