CSS シェイプ

CSS シェイプの実例

以下の例では、左に浮動状態の画像を表示し、 shape-outside プロパティを circle(50%) の値で適用しています。これは形を作成し、浮動状態の要素で折り返すコンテンツが図形に回り込むようになります。これにより、テキストの行ボックスが折り返す長さが変わります。 "Play" をクリックすると、このコードを MDN Playground で編集することができます。

<div class="box">
  <img
    alt="熱気球"
    src="https://mdn.github.io/shared-assets/images/examples/round-balloon.png" />
  <p>
    1782 年 11 月のある夜、フランスの小さな町アノネーで、2人の兄弟が冬の焚き火を囲みながら、囲炉裏から立ち上る灰色の煙が広い煙突に巻き上がるのを見ていた。 2 人の名前はステファンおよびジョセフ・モンゴルフィエ、職業は紙漉き職人で、思慮深く、あらゆる科学的知識や新しい発見に深い関心を持っていた。それが記念すべき夜であったことを証明するように、その夜以前には、何億人もの人々が、その事実から特別なインスピレーションを得ることなく、焚き火の煙が立ち昇るのを眺めていた。
  </p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}
img {
  float: left;
  shape-outside: circle(50%);
}

リファレンス

プロパティ

• shape-image-threshold
• shape-margin
• shape-outside

データ型

• <basic-shape>

関数

• circle()
• ellipse()
• inset()
• path()
• polygon()
• rect()
• shape()
• xywh()

用語

• 参照ボックス

ガイド

シェイプの概要

shape-margin および clip-path プロパティで基本的な図形を定義し、基本的なシェイプを開発者ツールでデバッグします。

ボックス値からのシェイプ

border-radius の曲率と CSS ボックスモデルの値を使用して図形を作成します。

shape-outside による基本シェイプ

CSS シェイプ、参照ボックス、 shape-outside プロパティを使って矩形、、楕、多角形を作成します。

画像からのシェイプ

シェイプを半透過の画像ファイルや CSS グラデーションから作成します。

関連概念

CSS モーションパスモジュール

• offset
• offset-anchor
• offset-distance
• offset-path
• offset-position
• offset-rotate
• ray() 関数

CSS マスクモジュール

• clip
• clip-path
• clip-rule
• mask
• mask-origin
• mask-position

CSS 背景と境界モジュール

• border-radius 一括指定

CSS ボックスモデルモジュール

• <box-edge> データ型

仕様書

関連情報

• CSS Shapes resources
• CSS Shapes 101 via alistapart.com (2014)
• Creating non-rectangular layouts with CSS Shapes via sarasoueidan.com (2013)
• How to use CSS Shapes in your web design via tutsplus.com (2016)
• How to get started with CSS Shapes via webdesignerdepot.com (2015)
• Edit CSS shapes with the shape path editor via mozilla.org (2018) (Video)