Egenskapen shape-outside

Egenskapen shape-outside låter dig ange icke-standardformer för flöde för flytande element. Intilliggande element kommer att flyta runt den angivna formen, istället för den rektangulära containern.

Syntax

selector {
	shape-outside: värde;
}

Värden

Värde	Beskrivning
`circle()`	Cirkulär flödesform
`ellipse()`	Elliptisk flödesform
`polygon()`	Godtycklig polygonal form
`url()`	Form baserad på alfakanalen i en bild
`margin-box`	Använd marginalgränser (standardvärde)

Exempel

Vi skapar en cirkulär flödesform för ett flytande element. Vi använder egenskaperna shape-outside och 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;
}

Exempel

Vi sätter en marginal med egenskapen 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;
}

Exempel

Utan egenskapen clip-path kommer texten att flyta runt cirkeln, men elementet kommer inte att ha en cirkulär form:

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

Exempel

En annan elementform:

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

Exempel

En annan elementform:

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

Se även

egenskapen clip-path,
som skapar elementets synliga form
egenskapen float,
nödvändig för att shape-outside ska fungera
egenskapen shape-margin,
som lägger till en marginal runt formen