CSS clip-path 속성을 생성하세요. 사각형, 원, 타원, 다각형 등 다양한 모양을 지원합니다. 실시간 미리보기 및 코드 생성.
clip-path: circle(50% at 50% 50%);이 도구는 CSS clip-path 속성을 생성하여 이미지와 요소를 다양한 모양으로 클리핑합니다. 사각형, 원, 타원, 다각형을 지원하며 실시간 미리보기와 코드 생성 기능을 제공합니다.
The CSS clip-path property creates a clipping region that defines what part of an element should be shown. Parts inside the region are displayed, while parts outside are hidden. It can use basic shapes like circle() and ellipse(), the inset() function for rectangles with rounded corners, or polygon() for custom multi-point shapes.
clip-path with basic shapes (circle, ellipse, inset, polygon) is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. For older browsers, you may need to provide a fallback layout. The -webkit- prefix is no longer needed for current browser versions.
Yes. clip-path can be applied to any HTML element including images, divs, videos, and iframes. It is commonly used to create circular profile pictures, hexagonal image galleries, diagonal section dividers, and other creative layouts.
border-radius only rounds the corners of a rectangular element, keeping it fundamentally a rectangle. clip-path can create any arbitrary shape including triangles, stars, and custom polygons by hiding parts of the element entirely. For complex shapes beyond rounded rectangles, clip-path is the tool to use.