Die shape-outside eienskap

Die eienskap shape-outside laat jou toe om nie-standaard omloopvorms vir drywende elemente te spesifiseer. Aangrensende elemente sal om die gespesifiseerde vorm omloop, en nie om die reghoekige houer nie.

Sintaksis

selekteerder {
	shape-outside: waarde;
}

Waardes

Waarde	Beskrywing
`circle()`	Sirkelvormige omloopvorm
`ellipse()`	Elliptiese omloopvorm
`polygon()`	Arbitrêre veelhoekvorm
`url()`	Vorm gebaseer op die alfa-kanaal van 'n beeld
`margin-box`	Gebruik die margin-grense (verstekwaarde)

Voorbeeld

Laat ons 'n sirkelvormige omloopvorm skep vir 'n drywende element. Ons gebruik die eienskappe shape-outside en 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;
}

Voorbeeld

Spesifiseer 'n spasing deur die eienskap 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;
}

Voorbeeld

Sonder die eienskap clip-path sal die teks om die sirkel omloop, maar die element sal nie 'n sirkelvorm hê nie:

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

Voorbeeld

'n Ander vorm vir die element:

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

Voorbeeld

'n Ander vorm vir die element:

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

Sien ook

die eienskap clip-path,
wat die sigbare vorm van die element skep
die eienskap float,
nodig vir shape-outside om te werk
die eienskap shape-margin,
wat 'n spasing om die vorm byvoeg