CSSのclip-pathプロパティを使用して不規則なグラフィックを表示する

clip-path

CSS プロパティはクリッピングを使用して要素の表示可能領域を作成します。領域内の部分が表示され、領域外の部分は非表示になります。

例

div {
  幅: 200ピクセル;
  高さ: 200px;
  背景: #6c00af;
  -webkit-クリップパス: ポリゴン(
    28% 6%、
    71% 15%、
    100% 75%、
    18% 39%,
    63% 27%、
    16% 22%、
    65% 19%
  );
  クリップパス: ポリゴン(
    28% 6%、
    71% 15%、
    100% 75%、
    18% 39%,
    63% 27%、
    16% 22%、
    65% 19%
  );
}

描画クリップパスアーティファクト

bennettfeely.com/clippy/

文法

/* キーワード値 */
クリップパス: なし;

/* <clip-source> の値 */ 
クリップパス: url(resources.svg#c1);

/* <geometry-box> の値 */
クリップパス: マージンボックス;
クリップパス: 境界ボックス;
クリップパス: パディングボックス;
クリップパス: コンテンツボックス;
クリップパス: 塗りつぶしボックス;
クリップパス: ストロークボックス;
クリップパス: ビューボックス;

/* <基本形状> の値 */
クリップパス: インセット(100px 50px);
クリップパス: 円(0から100ピクセルの50ピクセル);
クリップパス: ポリゴン(50% 0%, 100% 50%, 50% 100%, 0% 50%);
クリップパス: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');

/* ボックスとシェイプの値を結合 */
クリップパス: パディングボックスの円(0から100ピクセルのところに50ピクセル);

/* グローバル値 */
クリップパス: 継承;
クリップパス: 初期値;
クリップパス: 未設定;

価値

<clip-source>

<url>を使用してクリップ要素のパスを指定します。

<basic-shape>

サイズと位置が <geometrybox> 値によって定義される図形。ジオメトリ ボックスが指定されていない場合は、境界ボックスが参照ボックスとして使用されます。

<geometry-box>

<basic-shape>と一緒に宣言すると、基本図形に対応する参照ボックスが提供されます。カスタマイズすることで、図形の角を含む指定されたボックスの端 (たとえば、 border-radiusで定義されたクリッピング パス) が使用されます。ジオメトリ ボックスには、次のいずれかの値を指定できます。

margin-box

margin box参照ボックスとして使用します。

border-box

border box参照ボックスとして使用します。

padding-box

padding box参照ボックスとして使用します。

content-box

content box参照ボックスとして使用します。

fill-box

オブジェクトの境界ボックスを参照ボックスとして使用します。

stroke-box

ストローク境界ボックスを参照ボックスとして使用する

view-box

最も近い SVG ビューポートを参照ボックスとして使用します。要素の SVG ビューポートを作成するためにviewBox属性が指定されている場合、参照ボックスはviewBox属性によって確立された座標系の原点に配置されます。参照ボックスは viewBox 属性によって確立された座標系の原点に配置され、参照ボックスの寸法はviewBox属性の幅と高さの値を設定するために使用されます。

none

クリッピングパスは作成されません。

CSS の clip-path プロパティを使用して不規則なグラフィックを表示する方法についての記事はこれで終わりです。CSS の clip-path 不規則なグラフィックの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。