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

試してみましょう

shape-outside: circle(50%);

shape-outside: ellipse(130px 140px at 20% 20%);

shape-outside: url("/shared-assets/images/examples/round-balloon.png");

shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

<section>  <div>    <img                src="/shared-assets/images/examples/round-balloon.png"      width="150" />    私と同行者は、夕食後、遅くとも 11 時までに彼の家に迎えにいくことで合意していた。この運動神経抜群の若いフランス人は、気球乗りを趣味とするパリのスポーツ愛好家たちの小さなグループに属している。通常のスポーツで得られるあらゆる感覚、猛スピードでの「自動車運転」のスリルさえも尽くした後、「エアロクラブ」のメンバーたちは今や空へと目を向け、あらゆる種類の危険な技に興じながら、地上ではもはや探せなくなった神経をすり減らすような興奮を求めている。  </div></section>

.example-container {  text-align: left;  padding: 20px;}#example-element {  float: left;  width: 150px;  margin: 20px;}

構文

/* キーワード値 */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: circle() border-box;shape-outside: margin-box ellipse();/* <url> 値 */shape-outside: url("image.png");/* <gradient> 値 */shape-outside: linear-gradient(45deg, white 150px, red 150px);/* グローバル値 */shape-outside: inherit;shape-outside: initial;shape-outside: revert;shape-outside: revert-layer;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() のいずれかの関数によって生成された形状に基づいて計算されます。<shape-box> も提供された場合は、<basic-shape> 関数の参照ボックスを定義します。それ以外の場合、参照ボックスはデフォルトでmargin-box になります。

<image>

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

公式定義

形式定義

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

<basic-shape> =
<basic-shape-rect>|
<circle()>|
<ellipse()>|
<polygon()>|
<path()>|
<shape()>

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

<image> =
<url>|
<image()>|
<image-set()>|
<cross-fade()>|
<element()>|
<gradient>

<basic-shape-rect> =
<inset()>|
<rect()>|
<xywh()>

<circle()> =
circle(<radial-size>?[at<position>]?)

<ellipse()> =
ellipse(<radial-size>?[at<position>]?)

<polygon()> =
polygon(<'fill-rule'>?[round<length>]? ,[<length-percentage><length-percentage>]#)

<path()> =
path(<'fill-rule'>? ,<string>)

<shape()> =
shape(<'fill-rule'>?from<position> ,<shape-command>#)

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

<image()> =
image(<image-tags>?[<image-src>? ,<color>?]!)

<image-set()> =
image-set(<image-set-option>#)

<cross-fade()> =
cross-fade(<cf-image>#)

<element()> =
element(<id-selector>)

<inset()> =
inset(<length-percentage>{1,4}[round<'border-radius'>]?)

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

<xywh()> =
xywh(<length-percentage>{2}<length-percentage [0,∞]>{2}[round<'border-radius'>]?)

<radial-size> =
<radial-extent>|
<length [0,∞]>|
<length-percentage [0,∞]>{2}

<position> =
<position-one>|
<position-two>|
<position-four>

<fill-rule> =
nonzero|
evenodd

<length-percentage> =
<length>|
<percentage>

<shape-command> =
<move-command>|
<line-command>|
close|
<horizontal-line-command>|
<vertical-line-command>|
<curve-command>|
<smooth-command>|
<arc-command>

<image-tags> =
ltr|
rtl

<image-src> =
<url>|
<string>

<image-set-option> =
[<image>|<string>][<resolution>||type(<string>)]?

<cf-image> =
[<image>|<color>]&&
<percentage [0,100]>?

<id-selector> =
<hash-token>

<border-radius> =
<length-percentage [0,∞]>{1,4}[ /<length-percentage [0,∞]>{1,4}]?

<radial-extent> =
closest-corner|
closest-side|
farthest-corner|
farthest-side

<position-one> =
left|
center|
right|
top|
bottom|
x-start|
x-end|
y-start|
y-end|
block-start|
block-end|
inline-start|
inline-end|
<length-percentage>

<position-two> =
[left|center|right|x-start|x-end]&&[top|center|bottom|y-start|y-end]|
[left|center|right|x-start|x-end|<length-percentage>][top|center|bottom|y-start|y-end|<length-percentage>]|
[block-start|center|block-end]&&[inline-start|center|inline-end]|
[start|center|end]{2}

<position-four> =
[[left|right|x-start|x-end]<length-percentage>]&&[[top|bottom|y-start|y-end]<length-percentage>]|
[[block-start|block-end]<length-percentage>]&&[[inline-start|inline-end]<length-percentage>]|
[[start|end]<length-percentage>]{2}

<move-command> =
move<command-end-point>

<line-command> =
line<command-end-point>

<horizontal-line-command> =
hline[to[<length-percentage>|left|center|right|x-start|x-end]|by<length-percentage>]

<vertical-line-command> =
vline[to[<length-percentage>|top|center|bottom|y-start|y-end]|by<length-percentage>]

<curve-command> =
curve[[to<position>with<control-point>[ /<control-point>]?]|[by<coordinate-pair>with<relative-control-point>[ /<relative-control-point>]?]]

<smooth-command> =
smooth[[to<position>[with<control-point>]?]|[by<coordinate-pair>[with<relative-control-point>]?]]

<arc-command> =
arc<command-end-point>[[of<length-percentage>{1,2}]&&<arc-sweep>?&&<arc-size>?&&[rotate<angle>]?]

<command-end-point> =
to<position>|
by<coordinate-pair>

<control-point> =
<position>|
<relative-control-point>

<coordinate-pair> =
<length-percentage>{2}

<relative-control-point> =
<coordinate-pair>[from[start|end|origin]]?

<arc-sweep> =
cw|
ccw

<arc-size> =
large|
small

例

漏斗状のテキスト

HTML

<div>  <div></div>  <div></div>  <p>    ウェブページのテキストコンテンツが、特定のリンクをクリックさせるために、ページ上のある一点へ注意を誘導するように現れることがあります。気づかない場合もあります。  </p></div>

CSS

.main {  width: 530px;}.left,.right {  background-color: lightgray;  height: 12ex;  width: 40%;}.left {  clip-path: polygon(0 0, 100% 100%, 0 100%);  float: left;  shape-outside: polygon(0 0, 100% 100%, 0 100%);}.right {  clip-path: polygon(100% 0, 100% 100%, 0 100%);  float: right;  shape-outside: polygon(100% 0, 100% 100%, 0 100%);}p {  text-align: center;}

結果

仕様書

ブラウザーの互換性

関連情報

• CSS シェイプ
• CSS シェイプの概要
• <basic-shape>
• shape-margin
• shape-image-threshold