CSSクリップパスプロパティの導入-CSSチュートリアル-php.cn

Key Takeaways

The Basics

Syntax and Usage

geometry-box

clip-path

アニメーションの追加

CSSクリップパスプロパティをアニメーション化することは可能ですか？

関数を使用してsvg

ははるかに汎用性があります。

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSクリップパスプロパティの導入

Joseph Gordon-Levitt

Feb 21, 2025 am 08:29 AM

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
</head>
<body>
    <div class="container">
        <img src="/static/imghw/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 id="Key-Takeaways">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 id="The-Basics">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 id="Syntax-and-Usage">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%);
}

ログイン後にコピー

これは菱形を作成します。頂点座標（x、y）は、要素のボックスに対して時計回りです。

`geometry-box`

でクリッピングします

<code>.clip-me {
  clip-path: polygon(10% 20%, 20% 30%, 50% 80%) margin-box;
  margin: 10%;
}
        </code>ログイン後にコピー

ここで、margin-boxは参照です。 svg要素は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>ログイン後にコピー

画像ギャラリーとアバターは、非長方形の形状の恩恵を受けています。

<code>.right {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  position: relative;
  top: -352px;
  left: 256px;
}
        </code>ログイン後にコピー

アニメーションの追加

アニメーションclip-path、しかし、一貫した頂点数を維持してスムーズな遷移を維持します。

<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>

ログイン後にコピー

ブラウザサポート

ieとエッジにはサポートがありません。 Firefoxには部分的なサポートがあります（

構文、フラグを介して有効になる可能性があります）。 Chrome、Safari、およびOperaには、url()プレフィックスが必要です。最新情報には-webkit-を使用できますか？結論

は、重要なデザインの可能性を提供します。 ClippyやCSS Plantのクリップパスジェネレーターなどのツールは、複雑なポリゴンの作成を簡素化します。

clip-pathよくある質問（FAQ）