Omadus shape-outside

Omadus shape-outside võimaldab määrata ujuvate elementide jaoks ebastandardseid voolavuse kujundeid. Naaberelemendid voolavad ümber määratud kuju, mitte ümber ristkülikukujulise konteineri.

Süntaks

valija {
	shape-outside: väärtus;
}

Väärtused

Väärtus	Kirjeldus
`circle()`	Ümmargune voolavuse kuju
`ellipse()`	Elliptiline voolavuse kuju
`polygon()`	Suvaline hulknurkne kuju
`url()`	Kuju põhineb pildi alfa-kanalil
`margin-box`	Kasuta marginaide piire (vaikeväärtus)

Näide

Teeme ujuva elemendi jaoks ümmarguse voolavuse kuju. Kasutame omadusi shape-outside ja 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;
}

Näide

Määrame taande omadusega 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;
}

Näide

Ilma omaduseta clip-path tekst voolab ümber ringi, kuid element ei oma ringi kuju:

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

Näide

Teine elemendi kuju:

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

Näide

Teine elemendi kuju:

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

Vaata ka

omadus clip-path,
mis loob elemendi nähtava kuju
omadus float,
vajalik shape-outside toimimiseks
omadus shape-margin,
mis lisab kuju ümber taande