clip

clipCSS のプロパティで、要素のどの部分が可視であるかを定義します。 clip プロパティは絶対配置された要素、つまり position:absolute または position:fixed を持つ要素だけに適用されます。

css
/* キーワード値 */
clip: auto;

/* <shape> 値 */
clip: rect(1px, 10em, 3rem, 2ch);

/* グローバル値 */
clip: inherit;
clip: initial;
clip: revert;
clip: unset;

構文

メモ: 可能であれば、より新しい clip-path を使うことをお勧めします。

<shape>

rect(<top>, <right>, <bottom>, <left>) 形式の矩形の <shape> です。 <top><bottom> は、ボックス境界の上辺からのオフセットを表します。<right><left> は、ボックス境界の左辺からのオフセットを表します。これがボックスの中身となります。

<top><right><bottom><left> の値は <length> または auto のいずれかです。auto が指定されると、その辺の内部のボックス境界で切り取られます。

auto

要素はクリップされません (既定値)。ボックス境界で切り取る rect(auto, auto, auto, auto) とはまったく異なることに注意してください。

公式定義

初期値auto
適用対象絶対位置指定された要素
継承なし
計算値auto が指定されていれば auto、それ以外は 4 つの値をともなう矩形。矩形の場合、各値は auto が指定されていれば auto、それ以外では長さの計算値
アニメーションの種類rectangle

形式文法

clip = 
<rect()> |
auto

<rect()> =
rect( <top> , <right> , <bottom> , <left> )

画像の切り抜き

CSS

css
.dotted-border {
  border: dotted;
  position: relative;
  width: 536px;
  height: 350px;
}

#top-left,
#middle,
#bottom-right {
  position: absolute;
  top: 0;
}

#top-left {
  left: 360px;
  clip: rect(0, 175px, 113px, 0);
}

#middle {
  left: 280px;
  clip: rect(119px, 255px, 229px, 80px);
}

#bottom-right {
  left: 200px;
  clip: rect(235px, 335px, 345px, 160px);
}

HTML

html
<p class="dotted-border">
  <img src="hut.jpg" title="Original graphic" />
  <img id="top-left" src="hut.jpg" title="Graphic clipped to upper left" />
  <img id="middle" src="hut.jpg" title="Graphic clipped towards middle" />
  <img
    id="bottom-right"
    src="hut.jpg"
    title="Graphic clipped to bottom right" />
</p>

結果

仕様書

Specification
CSS Masking Module Level 1
# clip-property

ブラウザーの互換性

BCD tables only load in the browser

関連情報