プロパティshape-outside
プロパティ shape-outside は、浮動要素に対して標準的でない回り込み形状を設定することを可能にします。
隣接する要素は、矩形のコンテナではなく、指定された形状を回り込みます。
構文
セレクタ {
shape-outside: 値;
}
値
| 値 | 説明 |
|---|---|
circle() |
円形の回り込み形状 |
ellipse() |
楕円形の回り込み形状 |
polygon() |
任意の多角形の形状 |
url() |
画像のアルファチャンネルに基づく形状 |
margin-box |
marginの境界を使用する (デフォルト値) |
例
浮動要素に対して円形の回り込み形状を作成します。
プロパティ shape-outside と
clip-path を使用します:
<div class="shape"></div>
<p>
some long text
</p>
.shape {
width: 150px;
height: 150px;
float: left;
shape-outside: circle(50%);
clip-path: circle(50%);
background: #3498db;
}
p {
width: 500px;
text-align: justify;
}
:
例
プロパティ shape-margin を通じて余白を設定します:
<div class="shape"></div>
<p>
some long text
</p>
.shape {
width: 150px;
height: 150px;
float: left;
shape-outside: circle(50%);
shape-margin: 10px;
clip-path: circle(50%);
background: #3498db;
}
p {
width: 500px;
text-align: justify;
}
:
例
プロパティ clip-path なしでは、テキストは
円を回り込みますが、要素自体は円形の形状を持ちません:
<div class="shape"></div>
<p>
some long text
</p>
.shape {
width: 150px;
height: 150px;
float: left;
shape-outside: circle(50%);
background: #3498db;
}
p {
width: 500px;
text-align: justify;
}
:
例
別の要素形状:
<div class="shape"></div>
<p>
some long text
</p>
.shape {
width: 200px;
height: 200px;
background-color: #4CAF50;
float: left;
shape-outside: polygon(0% 0%, 100% 50%, 0% 100%);
clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
margin-right: 20px;
margin-bottom: 20px;
}
p {
width: 500px;
text-align: justify;
}
:
例
別の要素形状:
<div class="shape"></div>
<p>
some long text
</p>
.shape {
width: 200px;
height: 200px;
background-color: #4CAF50;
float: left;
shape-outside: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
margin-right: 20px;
margin-bottom: 20px;
}
p {
width: 500px;
text-align: justify;
}
:
関連項目
-
要素の視覚的な形状を作成するプロパティ
clip-path -
shape-outsideの動作に必要なプロパティ
float -
形状の周りに余白を追加するプロパティ
shape-margin