Egenskaben shape-outside

Egenskaben shape-outside tillader dig at definere ikke-standard flydeformer for flydende elementer. Tilstødende elementer vil flyde omkring den definerede form i stedet for den rektangulære container.

Syntaks

selector {
	shape-outside: værdi;
}

Værdier

Værdi	Beskrivelse
`circle()`	Cirkulær flydeform
`ellipse()`	Elliptisk flydeform
`polygon()`	Vilkårlig polygonform
`url()`	Form baseret på billedets alfakanal
`margin-box`	Brug margin-grænser (standardværdi)

Eksempel

Lad os lave en cirkulær flydeform for et flydende element. Vi bruger egenskaberne shape-outside og 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;
}

Eksempel

Definer en afstand via egenskaben 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;
}

Eksempel

Uden egenskaben clip-path vil teksten flyde omkring cirklen, men elementet vil ikke have cirkelform:

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

Eksempel

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

Eksempel

En anden 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 også

egenskaben clip-path,
som skaber den synlige form af et element
egenskaben float,
nødvendig for at shape-outside skal fungere
egenskaben shape-margin,
som tilføjer en afstand omkring formen