CSS inset() 関数

定義と使用方法

CSSの inset() 関数は参照フレームの各辺から指定された内接距離を保つ矩形を定義します。

inset() 関数は通常、 clip-path 属性と shape-outside 属性を組み合わせて使用。

インスタンス

例 1

2つの <div> 要素を、参照フレームの各辺から指定された内接距離を保つ矩形にカットアウトします：

#blueDIV {
  float: left;
  width: 150px;
  height: 100px;
  background-color: lightblue;
  clip-path: inset(15px);
}
#pinkDIV {
  float: left;
  width: 150px;
  height: 100px;
  background-color: pink;
  clip-path: inset(5% 10% 15% 10% 丸 20px);
}

実際に試してみる

例 2

使用 clip-path および inset() アニメーション効果を実現する：

#myDIV {
  width: 100px;
  height: 100px;
  background-color: coral;
  color: green;
  animation: mymove 5s infinite;
  clip-path: inset(10% 丸 20px);
}
@keyframes mymove {
  50% {clip-path: inset(50% 丸 50px);}
}

実際に試してみる

例 3

を組み合わせて使用 inset()、clip-path および shape-outside：

#blueDIV {
  float: left;
  width: 150px;
  height: 100px;
  background-color: lightblue;
  clip-path: inset(45px 50px 15px 0 丸 50px);
  shape-outside: inset(40px 40px 10px 0 丸 50px);
}

実際に試してみる

CSS 文法

inset(length-percentage 丸 border-radius)

技術的詳細

ブラウザのサポート

テーブルの数字は、この関数を完全にサポートする最初のブラウザのバージョンを示しています。

関連ページ

参照：CSS clip-path 属性

参照：CSS shape-outside 属性

参照：CSS circle() 関数

参照：CSS ellipse() 関数

参照：CSS polygon() 関数