shape-outside

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

shape-outside は CSS のプロパティで、隣接するインラインコンテンツが回り込むシェイプ (形状) を — 矩形でない場合もありますが — 定義します。既定では、インラインコンテンツはマージンボックスを回り込みます。shape-outside によって、この回り込みをカスタマイズし、テキストが単純なボックスではなく複雑なオブジェクトの周りを回り込めるようにします。

試してみましょう

構文

css
/* キーワード値 */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

/* 関数値 */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
shape-outside: 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"
);

/* <url> 値 */
shape-outside: url(image.png);

/* <gradient> 値 */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);

/* グローバル値 */
shape-outside: initial;
shape-outside: inherit;
shape-outside: revert;
shape-outside: unset;

shape-outside プロパティは、浮動領域と浮動要素を表す以下に挙げた値を使用して指定します。浮動領域はインラインコンテンツ (浮動要素) が囲む形状を指定します。

値

none

浮動領域は影響を受けません。インラインコンテンツは通常通り、要素のマージンボックスを回り込みます。

<shape-box>

浮動領域は浮動要素の辺の形状に従って (CSS ボックスモデル で定義された通りに) 計算されます。これはmargin-box、border-box、padding-box、content-box の何れかになります。この形状は border-radius プロパティで生成された丸い角も含みます (background-clip と同様の動作です)。

margin-box

マージンの外側の縁で囲まれた形状を定義します。この形状の角の半径は、対応する border-radius および margin の値で決定されます。 border-radius / margin の比率が 1 以上の場合、マージンの角の半径は border-radius + margin です。この比率が 1 未満の場合、マージンの角の半径は border-radius + (margin * (1 + (ratio-1)^3)) となります。

border-box

境界の外側の縁で囲まれた形状を定義します。この形状は、境界の外側の形状における通常のルールに従います。

padding-box

パディングの外側の縁で囲まれた形状を定義します。この形状は、境界の内側の形状における通常のルールに従います。

content-box

コンテンツの外側の縁で囲まれた形状を定義します。このボックスのそれぞれの角の半径は、 0 と border-radius - border-width - padding の大きい方になります。

<basic-shape>

浮動領域は、inset()、circle()、ellipse()、polygon()、またはレベル 2 の仕様書で追加された path() の何れかによって生成された形状に基づいて計算されます。<shape-box> も提供された場合は、<basic-shape> 関数の参照ボックスを定義します。それ以外の場合、参照ボックスは既定で margin-box になります。

<image>

浮動領域は指定された <image> のアルファチャンネルに基づいて、 shape-image-threshold で定義されたように抽出され計算されます。

メモ: ユーザーエージェントは、shape-outside の値に含まれるすべての URL に対して、HTML5 の仕様で定義されている CORS に対応している可能性のあるフェッチメソッドを使用する必要があります。読み取りの際、ユーザーエージェントは "Anonymous" モードを使用し、参照元をスタイルシートの URL に設定し、文書の URL を含むオリジンを設定しなければなりません。この結果、有効な代替画像がないなどのネットワークエラーが発生した場合は、none の値を指定したのと同様になります。

補間

1 つ目と 2 つ目の <basic-shape> の間でアニメーションを行う場合、次のルールが適用されます。シェイプ関数の中の値は、単純なリストとして補間されます。このリストの値の補間は、可能な限り <length>、<percentage>、calc() のいずれかとして補間されます。リストの値がこれらの型ではなく、同一であった場合 (両方のリストの同じ位置に nonzero があった場合など)、それらの値は補間されます。

  • 両方の形状は、同じ参照ボックスを使用する必要があります。
  • 両方の形状が同じ型であった場合、その型が ellipse() または circle() であり、かつどの半径にも closest-side や farthest-side のキーワードを使用していない場合は、シェイプ関数内のそれぞれの値の間で補間されます。
  • 両方の形状が inset() 型であった場合、シェイプ関数内のそれぞれの値の間で補間されます。
  • 両方の形状が polygon() 型であった場合、両方の多角形の頂点の数が同じで、同じ <fill-rule> を使用していた場合は、シェイプ関数内のそれぞれの値の間で補完されます。
  • それ以外の場合は、補間は行われません。

公式定義

初期値none
適用対象浮動要素
継承なし
計算値<basic-shape> で定義された通り (与えられている場合は shape-box が続く)、 URI を絶対化した <image>、それ以外は指定通り。
アニメーションの種類<basic-shape> で指定された場合はあり、それ以外の場合はなし

形式定義

shape-outside = 
  none                              |
  [ <basic-shape> || <shape-box> ]  |
  <image>                           

<shape-box> = 
  <visual-box>  |
  margin-box    

<image> = 
  <url>       |
  <gradient>  

<visual-box> = 
  content-box  |
  padding-box  |
  border-box   

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

例

漏斗状のテキスト

HTML

html
<div class="main">
  <div class="left"></div>
  <div class="right"></div>
  <p>
    Sometimes a web page's text content appears to be funneling your attention
    towards a spot on the page to drive you to follow a particular link.
    Sometimes you don't notice.
  </p>
</div>

CSS

css
.main {
  width: 530px;
}

.left,
.right {
  width: 40%;
  height: 12ex;
  background-color: lightgray;
}

.left {
  -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
  shape-outside: polygon(0 0, 100% 100%, 0 100%);
  float: left;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.right {
  -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  float: right;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

p {
  text-align: center;
}

結果

仕様書

Specification
CSS Shapes Module Level 1
# shape-outside-property

ブラウザーの互換性

BCD tables only load in the browser

関連情報