집 >웹 프론트엔드 >CSS 튜토리얼 >CSS Clip-Path 속성 소개

CSS Clip-Path 속성 소개

Joseph Gordon-Levitt원래의: 2025-02-21 08:29:09477검색

<code class="language-html"><!DOCTYPE html>


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Clip-Path: Shaping Web Elements</title>
    <style>
        body {
            font-family: sans-serif;
        }
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .intro-image {
            width: 500px;
            height: auto;
        }
        .section-title {
            font-size: 1.5em;
            font-weight: bold;
            margin-bottom: 1em;
        }
        .code-example {
            background-color: #f0f0f0;
            padding: 1em;
            border-radius: 5px;
            margin-bottom: 1em;
            overflow-x: auto; /* Add horizontal scroll if needed */
        }
        .code-example pre {
            margin: 0;
        }
        .image-example {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 2em;
        }
        .image-example img {
            max-width: 100%;
            height: auto;
        }
        .key-takeaway {
            margin-bottom: 2em;
        }
        .key-takeaway ul {
            list-style-type: disc;
            padding-left: 20px;
        }
        .faq-section {
            margin-top: 3em;
        }
        .faq-section h2 {
            font-size: 1.8em;
            font-weight: bold;
            margin-bottom: 1em;
        }
        .faq-section .faq-item {
            margin-bottom: 1em;
        }
        .faq-section .faq-item h3 {
            font-weight: bold;
            margin-bottom: 0.5em;
        }
    </style>


    <div class="container">
        <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174009775169997.jpg" class="lazy" alt="Introducing the CSS clip-path Property ">
    </div>

    <p>The web's predominantly rectangular layout contrasts with print media's diverse shapes.  This difference stems partly from a lack of suitable tools. This tutorial introduces <code>clip-path</code>, a CSS property offering the design flexibility of print.</p>

    <div class="key-takeaway">
        <h2>Key Takeaways</h2>
        <ul>
            <li>
<code>clip-path</code> masks parts of an element, exceeding the limitations of the deprecated <code>clip</code> property (rectangular clipping only).</li>
            <li>It supports basic shapes, geometry boxes, or SVG <code><clippath></code> URLs for complex shapes and animations.</li>
            <li>Animating <code>clip-path</code> requires matching vertex counts in initial and final shapes for smooth transitions.</li>
            <li>While not universally supported, major modern browsers (Chrome, Safari, Opera) support <code>clip-path</code> (often with prefixes). Firefox support is partial.</li>
        </ul>
    </div>

    <h2>The Basics</h2>
    <p>Clipping trims parts of an element, partially or fully hiding it.  The <i>clipping path</i> defines the visible region, whether a simple shape or a complex polygon.  The <i>clipping region</i> is the area within this path.  Anything outside is hidden, including backgrounds, borders, shadows, and events.</p>
    <p>Even with non-rectangular elements, surrounding content flows naturally. For shape-aware content flow, use the <code>shape-outside</code> property (see related SitePoint tutorial).</p>
    <p>Remember: <code>clip-path</code> differs from the limited, deprecated <code>clip</code> property.</p>

    <h2>Syntax and Usage</h2>
    <p>The syntax is: <code>clip-path: <clip-source> | [<basic-shape> || <geometry-box>] | none</code></p>
    <ul>
        <li>
<code><clip-source></code>: An SVG <code><clippath></code> URL.</li>
        <li>
<code><basic-shape></code>: Basic shape functions (CSS Shapes spec).</li>
        <li>
<code><geometry-box></code>: (Optional) Reference box for <code><basic-shape></code>, or defines the clipping shape itself (e.g., <code>margin-box</code>).</li>
    </ul>

    <div class="code-example">
        <pre class="brush:php;toolbar:false"><code>img {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
        </code>

이것은 마름모꼴을 만듭니다. 정점 좌표 (x, y)는 요소 상자에 비해 시계 방향입니다.

로 클리핑

`geometry-box`

여기,

<code>.clip-me {
  clip-path: polygon(10% 20%, 20% 30%, 50% 80%) margin-box;
  margin: 10%;
}
        </code>

는 참조입니다. svg 요소는 ,

또는 를 사용합니다 margin-box 의 사용 텍스트와 이미지를 향상시킵니다. 복잡한 모양은 쉽게 달성 할 수 있습니다. fill-box stroke-box view-box

`clip-path`

이미지 갤러리와 아바타

clip-path

애니메이션 추가

애니메이션

이지만 부드러운 전환을 위해 일관된 정점 계수를 유지합니다.

<code>.p-msg {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 85%, 75% 100%, 50% 80%, 0% 75%);
}
        </code>

브라우저 지원 즉, 가장자리는 지원이 부족합니다. Firefox에는 부분 지지대가 있습니다 (

구문, 플래그를 통해 잠재적으로 활성화). Chrome, Safari 및 Opera에는

접두사가 필요합니다. 최신 정보를 확인할 수 있습니까?

결론

<code>.right {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  position: relative;
  top: -352px;
  left: 256px;
}
        </code>

는 상당한 설계 가능성을 제공합니다. Clippy 및 CSS 플랜트의 클립 경로 발전기와 같은 도구 복잡한 다각형 생성을 단순화합니다.

자주 묻는 질문 (FAQS)

CSS Clip-Path 속성은 무엇이며 어떻게 작동합니까?

디스플레이 영역을 정의하면 요소의 일부를 차단합니다. 기본 모양, 지오메트리 상자 또는 SVG 경로를 허용하여 복잡한 모양과 애니메이션을 가능하게합니다.

clip-path CSS 클립 경로에서 다각형 함수를 어떻게 사용할 수 있습니까?

함수는 (x, y) 좌표 쌍을 사용하여 다각형의 정점을 정의합니다. 예를 들어,

<code>@keyframes polygons {
  25% {
    clip-path: polygon(20% 0%, 100% 38%, 70% 90%, 0% 100%);
  }
  50% {
    clip-path: polygon(0 46%, 100% 15%, 55% 74%, 0 100%);
  }
  70% {
    clip-path: polygon(100% 38%, 100% 38%, 66% 100%, 0 53%);
  }
}
        </code>

는 다이아몬드를 만듭니다

응답 디자인에 CSS 클립 경로 속성을 사용할 수 있습니까? 예, 요소 크기로 스케일링하기 위해 모양 매개 변수의 백분율을 사용하십시오.

CSS Clip-Path 속성을 애니메이션 할 수 있습니까? 예, 키 프레임과 속성을 사용합니다. 정점 수를 부드러운 전환을 위해 일관되게 유지하십시오

CSS Clip-Path 속성을 지원하는 브라우저는 무엇입니까? 대부분의 최신 브라우저가 지원합니다 (업데이트를 위해 사용할 수있는 확인).

animation

CSS 클립 경로에서 원 함수를 어떻게 사용할 수 있습니까?

원을 만듭니다. 예를 들어,

는 요소 내의 원을 중심으로합니다

CSS에서 SVG를 클립 경로로 사용할 수 있습니까? 예,

함수를 사용하여 svg 요소를 참조하십시오.

CSS에서 클립과 클립 경로의 차이점은 무엇입니까?
는 더 이상 사용되지 않으며 직사각형 클리핑 만 지원합니다. 는 훨씬 더 다재다능합니다. `circle(radius at position)` `clip-path: circle(50% at 50% 50%)` CSS 클립 경로에서 삽입 함수를 어떻게 사용할 수 있습니까?

옵션 둥근 모서리가있는 사각형을 만듭니다

단일 CSS 클립 경로에서 여러 모양을 사용할 수 있습니까?

예, SVG Path Syntax와 함께

함수를 사용합니다 url() <clippath>

위 내용은 CSS Clip-Path 속성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

firefox css chrome safari webkit edge define for require using Property function this display position margin border animation

성명：