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 class="default-example" id="default-example">
  <div class="example-container">
    <img
      class="transition-all"
      id="example-element"
      src="/shared-assets/images/examples/round-balloon.png"
      width="150" />
    We had agreed, my companion and I, that I should call for him at his house,
    after dinner, not later than eleven o’clock. This athletic young Frenchman
    belongs to a small set of Parisian sportsmen, who have taken up “ballooning”
    as a pastime. After having exhausted all the sensations that are to be found
    in ordinary sports, even those of “automobiling” at a breakneck speed, the
    members of the “Aéro Club” now seek in the air, where they indulge in all
    kinds of daring feats, the nerve-racking excitement that they have ceased to
    find on earth.
  </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: 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 で定義されたように抽出され計算されます。

補間

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

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

公式定義

形式定義

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 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

.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;
}

結果

仕様書

ブラウザーの互換性

関連情報

• CSS シェイプ
• CSS シェイプの概要
• ボックス値からのシェイプ
• 基本シェイプ
• 画像からのシェイプ
• <basic-shape>
• shape-margin
• shape-image-threshold