CSS3中鲜为人知但非常强大的 Clip-Path 属性

在CSS3中,clip-path属性可以让我们快速创建各种各样的不规则图形,而无需使用图片或者复杂的绘图工具。它可以帮助我们实现一些非常出色的视觉效果,但遗憾的是它并不是很常见。

clip-path属性可以接受多种不同的值,比如polygon()、circle()、ellipse()以及inset()等。

使用 polygon() 创建多边形

polygon()函数允许我们定义一个多边形的形状。我们只需要在函数中传入一系列的(x,y)坐标点即可。举个例子,下面的代码将创建一个正三角形:

div {
  width: 200px;
  height: 200px;
  background-color: #007bff;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

效果如下:

我们可以继续增加坐标点的数量来创建更复杂的多边形图形。比如下面的代码将创建一个五角星:

div {  
  width: 100px; 
  height: 100px; 
  background-color: #6c757d;  
  clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
}

使用 circle() 和 ellipse() 创建圆形和椭圆

如果需要创建圆形或椭圆,我们可以使用circle()和ellipse()函数。circle()函数需要一个半径值,而ellipse()函数需要两个半径值(分别代表x轴和y轴)。

下面是一个例子:

div {  
 width: 200px;  
 height: 200px;  
 background-color: #ffc107;  
 clip-path: circle(50% at 50% 50%);
}

div {  
 width: 300px;  
 height: 200px;  
 background-color: #17a2b8; 
 clip-path: ellipse(40% 60% at 50% 50%);

使用 inset() 创建内嵌图形inset()函数允许我们创建一个内嵌的矩形图形。它需要四个参数:top、right、bottom和left。这四个参数定义了矩形相对于其包含元素的位置和大小。

比如下面的代码将创建一个内嵌的圆角矩形:

div {  
 width: 300px;  
 height: 200px;  
 background-color: #28a745;  
 clip-path: inset(10% 20% 10% 20% round 20px);