Existem várias opções para fazer o desejado, mas aqui vou apresentar duas soluções (a resposta iria ficar muito grande com todas elas).
Algumas das opções são:
- Canva
- CSS "puro"
- CSS com JavaScript (Exemplo 1)
- SASS
- SVG e path (Exemplo 2)
Poderia fazer com SASS, mas o SO não tem suporte no snippet. Então vamos fazer com um pouco de JavaScript (que irá aplicar CSS a elementos).
Observação: Antes de entender o que está acontecendo com o código vou
ressaltar que essa não é a melhor solução, até porque existem
bibliotecas, com o Arctext.js que faria de uma maneira simples isso
para nós, apenas estou atendendo a solicitação da pergunta.
O maior problema desse método vai ser que se alterar uma palavra na div
teria que voltar e mexer no JavaScript e CSS novamente. Mas enfim, veja o exemplo 1:
let deg = 6;
for (let i = 1; i <= 20; i++) {
let div = document.querySelector(".container div:nth-child(" + i + ")");
div.style.transform = 'rotate(' + deg + 'deg)';
deg = deg + 6;
}
.container {
margin: auto;
position: relative;
transform-origin: bottom left;
transform: rotate(-61deg);
height: 200px;
width: 200px;
}
.container div {
display: inline-block;
font: 900 1.5em Monaco, Monospace;
color: #000000;
height: 200px;
width: 15px;
position: absolute;
left: 0;
top: 0;
transform-origin: bottom center;
text-align: center;
}
<div class="container">
<div>c</div>
<div>a</div>
<div>r</div>
<div>a</div>
<div>m</div>
<div>b</div>
<div>a</div>
<div> </div>
<div>o</div>
<div> </div>
<div>c</div>
<div>a</div>
<div>r</div>
<div>a</div>
<div> </div>
<div>é</div>
<div> </div>
<div>t</div>
<div>o</div>
<div>p</div>
</div>
Se olhar bem no meu exemplo vai perceber que não está 100% alinhado, para isso eu precisaria ter aumentado a precisão da rotação na div
container (o motivo: tenho prova hoje).
Basicamente nesse exemplo nós temos um div
container que irá ser rotacionada para qualquer direção, e que permitiria o arco ir para qualquer lado (ficar na direita, esquerda, topo...).
Fora isso, precisamos apenas aplicar a propriedade transform: rotate
do CSS em cada elemento filho dela, para eles também rotacionarem junto. Além disso, sempre mantenha um padrão para rotacionar, nesse exemplo fiz aumentando 6 a cada interação do for
.
Observação 2: O exemplo 1 (com JavaScript) daria para fazer 100% com CSS, mas o código ficaria extremamente gigante visto que precisariámos aplicar a cada elemento aquela propriedade aumentando 6 na rotação.
Entendido o primeiro exemplo poderemos ir ao segundo feito com SVG e path
. Acho a melhor solução pois permite fazer várias coisas com o texto, não só um arco.
Chega de texto e vamos entender por etapas:
Imagine esse SVG com um path
no estilo de um arco, é nele que iremos "escrever em cima".
<svg viewBox="0 0 500 500">
<path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
</svg>
Agora vamos adicionar um texto que irá seguir esse path
(caminho, lógico não?).
<svg viewBox="0 0 500 500">
<path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
<text width="500">
<textPath xlink:href="#curve">
Olha a curva vindo
</textPath>
</text>
</svg>
E o melhor de tudo, só mude o texto e ele ainda continua seguindo o caminho (por isso é melhor, não precisamos refatorar CSS e JavaScript).
Porém tem um problema, não queremos que a curva apareça. Então vamos a alteração. Para isso basta colocar dentro do path
a propriedade fill="transparent"
.
<svg viewBox="0 0 500 500">
<path id="curve" fill="transparent" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
<text width="500">
<textPath xlink:href="#curve">
Olha a curva vindo
</textPath>
</text>
</svg>
Agora estamos com tudo pronto, só estilizar com CSS e alterar o SVG um pouco.
body {
font-family: 'Luckiest Guy', cursive;
font-size: 50px;
}
path {
fill: transparent;
}
text {
fill: #FF9800;
}
<svg viewBox="0 0 1000 1000">
<path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
<text width="300">
<textPath xlink:href="#curve">
Olha a curva vindo
</textPath>
</text>
</svg>
Referências:
Curved Text
Path
textPath
. Veja esta documentação