R
There are several options to make the desired, but here I will present two solutions (the answer would be very great with all of them).Some of the options are:♪CSS "pure"CSS with JavaScript (Example 1)SASSSVG and path (Example 2)I could do with SASS, but the OS has no support in snippet. Then we will do with a bit of JavaScript (which will apply CSS to elements).Note: Before you understand what is happening with the code I will
highlighting that this is not the best solution, because there are
libraries, with the Arctext. js that would do in a simple way this
for us, I'm just answering the question request.The biggest problem of this method will be to change a word in div would have to go back and move on JavaScript and CSS again. But finally, see example 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>If you look well in my example you will realize that it is not 100% aligned, so I would need to have increased the accuracy of rotation in div container (the reason: I have proof today).Basically in this example we have a div container that will be rotated to any direction, and that would allow the arc to go anywhere (stay on the right, left, top...).Other than that, we just need to apply the property transform: rotate of the CSS in every child element of it, so they also rotate together. Also, always keep a pattern to rotate, in this example I made increasing 6 to each interaction of for.Observation 2: Example 1 (with JavaScript) would give to make 100% with CSS, but the code would be extremely giant since we needed to apply to each element that property by increasing 6 in rotation.Copy the first example we can go to the second made with SVG and path. I find the best solution because it allows you to do several things with the text, not only an arch.Enough text and we will understand by steps:Imagine this SVG with one path in the style of a bow, it is in it that we will "write on top".<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>Now let's add a text that will follow this path (path, logical not?). <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>And the best of all, just change the text and it still continues following the path (so it's better, we don't need to refactor CSS and JavaScript).But there is a problem, we do not want the curve to appear. Then let's change. To do this just put inside path the property 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>Now we're all set, just stylize with CSS and change the SVG a little.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>References: https://css-tricks.com/snippets/svg/curved-text-along-path/ https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath
