3

Sei que o CSS evolui devagar, mas tenho visto bastante coisa nova por aí, principalmente com os browsers mais modernos que aceitam propriedades bem novas.

Minha dúvida é se já existe alguma forma de colocar um texto dentro de um shape. Atualmente já é possível colocar um texto dentro de um círculo como na imagem abaixo?

inserir a descrição da imagem aqui

A bola dá pra fazer com border-radius, mas e para fazer o texto acompanhar a forma do círculo? Como fazer o texto ficar contido ou inserir o texto dentro de uma forma circular, ou uma div com um determinado shape?

Exemplo que tentei:

.box {
	width: 300px;
	height: 300px;
	border-radius: 50%;
	border: 1px solid #000;
	margin: auto;
	text-align: center;
}
<div class="box">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur ipsum in aut blanditiis iusto aspernatur odio ad officia. Ipsam, recusandae repellendus tempora magni obcaecati vero nostrum dolorem molestias libero repellat debitis cupiditate sequi rem provident accusantium dolore modi hic ut neque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam mollitia, sapiente numquam quos tenetur facilis odit dolorum accusamus, at ducimus nemo, corrupti pariatur? Reiciendis exercitationem quibusdam voluptatum assumenda ullam voluptas. 
</div>

3

1 Resposta 1

3

Realmente ainda não há uma propriedade própria pra isso. Isso porque os elementos box (div, span, inputs etc.) são construídos em forma quadrada. Com clip-path é possível fazer um hack utilizando a propriedade shape-outside utilizando duas divs filhas, uma posicionada à esquerda (float_left) e outra à direita (float-right), e o texto fica no meio contornando as bordas das duas divs dos dois lados.

Veja abaixo um print dos elementos clipados em forma de polígono:

inserir a descrição da imagem aqui

Coloquei um fundo vermelho e reduzi a opacidade para poder visualizar os elementos clipados contornando a borda do círculo.

No clip-path utilizei 11 pontos de coordenadas, ajustando cada ponto numa posição de modo que fiquem distribuídos uniformemente sobre a borda do círculo.

Abaixo um print com a sequência dos pontos no polígono na div.left-shape:

inserir a descrição da imagem aqui

Para aplicar os valores na div.right-shape a lógica é a mesma, bastando inverter os valores do polígono da esquerda.

Uma vez criadas as coordenadas do polígono do clip-path, é só copiar os mesmos valores para a propriedade shape-outside.

Código:

.box {
	width: 300px;
	height: 300px;
	border-radius: 50%;
	border: 1px solid #000;
	text-align: center;
}

.left-shape{
  shape-outside: polygon(
  0 0,
  100% 0,

  55% 5%,
  20% 20%,
  5% 35%,

  0 50%,

  5% 65%,
  20% 80%,
  55% 95%,

  100% 100%,
  0 100%
  );
  float: left;
  width: 50%;
  height: 100%;
  clip-path: polygon(
  0 0,
  100% 0,

  55% 5%,
  20% 20%,
  5% 35%,

  0 50%,

  5% 65%,
  20% 80%,
  55% 95%,

  100% 100%,
  0 100%
  );
}

.right-shape{
  shape-outside: polygon(
  100% 0,
  0 0,

  45% 5%,
  80% 20%,
  95% 35%,

  100% 50%,

  95% 65%,
  80% 80%,
  45% 95%,

  0 100%,
  100% 100%
  );
  float: right;
  width: 50%;
  height: 100%;
  clip-path: polygon(
  100% 0,
  0 0,

  45% 5%,
  80% 20%,
  95% 35%,

  100% 50%,

  95% 65%,
  80% 80%,
  45% 95%,

  0 100%,
  100% 100%
  );
}
<div class="box">
   <div class="left-shape"></div>
   <div class="right-shape"></div>
   Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur ipsum in aut blanditiis iusto aspernatur odio ad officia. Ipsam, recusandae repellendus tempora magni obcaecati vero nostrum dolorem molestias libero repellat debitis cupiditate sequi rem provident accusantium dolore modi hic ut neque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam mollitia, sapiente numquam quos tenetur facilis odit dolorum accusamus, at ducimus nemo, corrupti pariatur? Reiciendis
</div>

Documentações:

Compatibilidade:

2
  • 1
    Isso ai Tio! 👏👏👏 achei que não iria aparecer ninguém para responder... ;) Seria que Existe um shap-outside-inset ou shape-inside ?
    – hugocsl
    Commented 7/06/2019 às 18:45
  • 1
    Pelas minhas pesquisas a única que encontrei foi o shape-outside.
    – Sam
    Commented 7/06/2019 às 18:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .