Eigenschaft shape-outside

Die Eigenschaft shape-outside ermöglicht es, nicht-standardisierte Umfließformen für fließende Elemente festzulegen. Benachbarte Elemente werden die angegebene Form umfließen, anstatt den rechteckigen Container.

Syntax

Selektor {
	shape-outside: Wert;
}

Werte

Wert	Beschreibung
`circle()`	Runde Umfließform
`ellipse()`	Elliptische Umfließform
`polygon()`	Beliebige polygonale Form
`url()`	Form basierend auf dem Alphakanal eines Bildes
`margin-box`	Die Margin-Grenzen verwenden (Standardwert)

Beispiel

Erstellen wir eine runde Umfließform für ein fließendes Element. Verwenden wir die Eigenschaften shape-outside und 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;
}

Beispiel

Legen wir einen Abstand über die Eigenschaft shape-margin fest:

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

Beispiel

Ohne die Eigenschaft clip-path wird der Text den Kreis umfließen, aber das Element selbst wird keine Kreisform haben:

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

Beispiel

Eine andere Form des Elements:

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

Beispiel

Eine andere Form des Elements:

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

Siehe auch

die Eigenschaft clip-path,
die die sichtbare Form des Elements erzeugt
die Eigenschaft float,
notwendig für die Funktion von shape-outside
die Eigenschaft shape-margin,
die einen Abstand um die Form hinzufügt