CSS - shape-outside

• トップ
• CSSリファレンス
• shape-outside

概要

説明

float でテキストの回り込みを行う際、矩形だけではなく円形や三角形など様々な形に沿ってテキストを回り込ませることができます。

使用例

#img1 {
  height: 200px;
  width: 200px;
  float: left;
  shape-outside: circle(50%);
}

<img id="img1" src="image/earth.png" alt="earth"> Earth is the third planet...

Earth is the third planet from the Sun and the only place known in the universe where life has originated and found habitability. While Earth may not contain the largest volumes of water in the Solar System, only Earth sustains liquid surface water, extending over 70.8% of the planet with its ocean, making it an ocean world. The polar regions currently retain most of all other water with large sheets of ice covering ocean and land, dwarfing Earth's groundwater, lakes, rivers and atmospheric water. The other 29.2% of the Earth's surface is land, consisting of continents and islands, and is widely covered by vegetation. Below the planet's surface lies the crust, consisting of several slowly moving tectonic plates, which interact to produce mountain ranges, volcanoes, and earthquakes. Inside the Earth's crust is a liquid outer core that generates the magnetosphere, deflecting most of the destructive solar winds and cosmic radiation. (by Wikipedia)

関数

circle(<shape-radius> [at <position> ]? )

円形を指定します。<shape-radius> には円の半径を <length> または <percentage> または 中心から最も近い辺までの距離(closest-side)、中心から最も遠い辺までの距離(farthest-side) のいずれかで指定します。at <position> を指定すると円の中央位置をずらすことができます。

.shape-circle {
  float: left;
  width: 100px;
  height: 100px;
  background-color: #ccf;
  clip-path:     circle(50px);
  shape-outside: circle(50px);
}

ellipse(<shape-radius-x> <shape-radius-y> [at <position> ]? )

楕円を指定します。<shape-radius-x> にはx軸、<shape-radius-y> にはy軸方向の円の半径を <length> または <percentage> または 中心から最も近い辺までの距離(closest-side)、中心から最も遠い辺までの距離(farthest-side) のいずれかで指定します。at <position> を指定すると楕円の中央位置をずらすことができます。

.shape-ellipse {
  float: left;
  width: 100px;
  height: 100px;
  background-color: #ccf;
  clip-path:     ellipse(50px 40px);
  shape-outside: ellipse(50px 40px);
}

polygon([<fill-rule>, ]? [x1 y1]# )

多角形を指定します。<fill-rule> には nonzero または evenodd を指定します。

.shape-polygon {
  float: left;
  width: 100px;
  height: 100px;
  background-color: #ccf;
  clip-path:     polygon(0px 0px, 100px 0px, 0px 100px);
  shape-outside: polygon(0px 0px, 100px 0px, 0px 100px);
}

inset(<shape-arg>{1,4} [round <border-radius>]? )

元の矩形から内側に入り込む長さを指定します。<shape-arg> は1個、2個または4個の <length> または <percentage> で、1個の場合は上下左右の、2個の場合は上下と左右の、4個の場合は上、右、下、左の長さを指定します。round を指定すると角を丸めることができます。

.shape-inset {
  float: left;
  width: 100px;
  height: 100px;
  background-color: #ccf;
  clip-path:     inset(0 50px 0 0 round 15px);
  shape-outside: inset(0 50px 0 0 round 15px);
}

関連項目

リンク

• https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Shapes
• https://drafts.csswg.org/css-shapes/