如何使用 CSS 剪辑创建形状？

您可以使用 CSS 中的clip-path属性轻松创建形状。实际上， clip-path属性可让您将元素剪辑为基本形状。圆形、椭圆、多边形等基本形状可以使用clip-path的< basic-shape>属性值来实现，本文将进一步讨论。

适当的价值：

• ：它包括一些剪裁给定图像的形状，如圆形、矩形、椭圆等。

句法：

clip-path:  

注意： clip-path允许剪辑 SVG 元素、图像或任何 HTML 元素的可见部分。

示例 1：以下示例创建圆形、多边形等形状。

• 多边形：

句法：

clip-path: polygon(pairs of X and Y coordinates)

• 圆圈：

句法：

clip-path: circle(radius);

HTML

    
      
    

  

    
  
    
GeeksforGeeks
    
Shapes using Clipping
  
        
Circle
  
        
Polygon
  
          
    

  

输出：

圆形和多边形

示例 2：以下示例创建 Ellipse 和 inset 形状。

• 椭圆：

句法：

clip-path: ellipse(radiusX radiusY at posX posY)

HTML

  

    
      
    

  

    
  
    
GeeksforGeeks
    
Shapes using Clipping
  
        
Ellipse
  
        
Inset
  
          
    

  

输出：

椭圆和插图

示例 3：以下示例创建圆形和七边形

圆的语法：

clip-path: circle(radius, shifted center by X, shifted center by Y)

HTML

  

    
      
    

  

    
  
    
Welcome to GeeksforGeeks
    
Shapes using Clipping
  
        
Circle
  
        
Heptagon
          
    

  

输出：

示例 4：以下示例创建椭圆和内嵌形状。

椭圆的语法：

clip-path: ellipse(x, y) 

插入语法：

clipt-path: inset(top, right, bottom, left)

HTML

  

    
      
    

  

    
  
    
GeeksforGeeks
    
Shapes using Clipping
        
Ellipse
  
        
Inset
          
    

  

输出：

椭圆和插图