Уласцівасць shape-outside

Уласцівасць shape-outside дазваляе задаваць нестандартныя формы абцякання для плаваючых элементаў. Суседнія элементы будуць абцякаць зададзеную форму, а не прамавугольны кантэйнер.

Сінтаксіс

селектар {
	shape-outside: значэнне;
}

Значэнні

Значэнне	Апісанне
`circle()`	Круглая форма абцякання
`ellipse()`	Эліптычная форма абцякання
`polygon()`	Адвольная шматкутная форма
`url()`	Форма на аснове альфа-канала выявы
`margin-box`	Выкарыстоўваць межы margin (значэнне па змаўчанні)

Прыклад

Зробім круглую форму абцякання для плаваючага элемента. Выкарыстаем уласцівасці shape-outside і clip-path:

<div class="shape"></div>
<p>
	нейкі доўгі тэкст
</p>

.shape {
	width: 150px;
	height: 150px;
	float: left;
	shape-outside: circle(50%);
	clip-path: circle(50%);
	background: #3498db;
}

p {
	width: 500px;
	text-align: justify;
}

Прыклад

Зададзім водступ праз уласцівасць shape-margin:

<div class="shape"></div>
<p>
	нейкі доўгі тэкст
</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;
}

Прыклад

Без уласцівасці clip-path тэкст тэкст будзе абцякаць круг, але элемент не будзе мець форму круга:

<div class="shape"></div>
<p>
	нейкі доўгі тэкст
</p>

.shape {
	width: 150px;
	height: 150px;
	float: left;
	shape-outside: circle(50%);
	background: #3498db;
}

p {
	width: 500px;
	text-align: justify;
}

Прыклад

Іншая форма элемента:

<div class="shape"></div>
<p>
	нейкі доўгі тэкст
</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;
}

Прыклад

Іншая форма элемента:

<div class="shape"></div>
<p>
	нейкі доўгі тэкст
</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;
}

Глядзіце таксама

уласцівасць clip-path,
якое стварае бачную форму элемента
уласцівасць float,
неабходнае для работы shape-outside
уласцівасць shape-margin,
якое дадае водступ вакол формы