格 千格 KiloCell

CSS Clip-Path Generators

Visualize CSS crop paths to create unique web shapes

CSS Code 
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

CSS Clip-Path Full Guide: Art to Break Rectangle Ties

In the traditional web development, we're used to a rectangle layout. However, as modern browsers develop, CSS clip-path The properties have opened up a whole new design dimension that allows us to tailor any element into a complex geometric shape.

1. What is Clip-Path?

clip-path The attribute creates a cropping area, which determines which elements are visible. The part within the region shows that the part outside the region is hidden. This is with overflow: hidden Different, because it allows non-retroverse path tailoring.

2. Core shape function resolution

  • Polygon() (polygon): The strongest function defines any shape by a series of toppoint coordinates (percentage or pixels).
  • Circle() (round): Defines a circle, which specifies the radius and centre position.
  • ellipse() (Eloval): Similar to a circle, but with different radiuss for permissible levels and vertical directions.
  • Inset() (inline rectangle): Defines a rectangular shear area within the element to support round angle (round).

3. Common operational cases and solutions

Case I: The irregular Hero Section Background

To make the screen of the web site more moving, designers often use tilts or wave edges. Solutions: Use polygon(0 0, 100% 0, 100% 80%, 0 100%) It is easier to create a thinned bottom container, which is more flexible and performance-friendly than using background pictures.

Case II: Responsive triangle indicator

We used to do that. border The technique draws a triangle, but it is difficult to control it in a responsive layout. Solutions: Use clip-path: polygon(50% 0%, 0% 100%, 100% 100%) 。 Since the coordinates are percentages, they will automatically stretch with the size of the container.

Case three: Creative headcut.

Except for the traditional. border-radius: 50% So you can give the user header a hexagonal or pentacle star shape, and you can increase brand recognition.

4. Attention and browser support

  • Response format: Use the percentage unit wherever possible to ensure that shapes are proportional to different screen sizes.
  • Interactivity: The cut-off area no longer responds to mouse events (e. g., over or click), which is very useful for a fine interactive design.
  • Performance: The cropping was accelerated by GPU, and it was excellent.

Through ours. Online visualization Clip-Path generator , you can drag the polygon directly to the preview area to adjust the polygon, or you can use the slider to accurately control the round angle and radius and get the generated in real time. CSS code.