Propriedade shape-outside

A propriedade shape-outside permite definir formas de fluxo não padronizadas para elementos flutuantes. Os elementos adjacentes fluirão ao redor da forma definida, e não do contêiner retangular.

Sintaxe

seletor {
	shape-outside: valor;
}

Valores

Valor	Descrição
`circle()`	Forma de fluxo circular
`ellipse()`	Forma de fluxo elíptica
`polygon()`	Forma poligonal arbitrária
`url()`	Forma baseada no canal alfa da imagem
`margin-box`	Usar as bordas da margem (valor padrão)

Exemplo

Vamos criar uma forma de fluxo circular para um elemento flutuante. Usamos as propriedades shape-outside e 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;
}

Exemplo

Vamos definir uma margem através da propriedade 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;
}

Exemplo

Sem a propriedade clip-path o texto fluirá ao redor do círculo, mas o elemento não terá a forma de um círculo:

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

Exemplo

Outra forma de elemento:

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

Exemplo

Outra forma de elemento:

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

Veja também

a propriedade clip-path,
que cria a forma visível do elemento
a propriedade float,
necessária para o funcionamento do shape-outside
a propriedade shape-margin,
que adiciona uma margem ao redor da forma