Click here to Skip to main content
15,891,633 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hello I want to make curved text in the circle that I have in my project like some text in the center of the circle and another text in the corner of the circle is curved I don't know how to do this please help me
Thanks.

What I have tried:

JavaScript
.estrellas {
  position: relative;
  width: 520px;
  height:300px;
  margin: 0 auto;
  font-size: 70px;
}
.estrellas span {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 70px;
  height: 300px;
  margin-left: -35px;
  line-height: 530px; /* height*2 - font-size */
  text-align: center;
  transform-origin: top center;
}
.estrellas span:nth-of-type(1)  {
  transform: rotate(75deg);
}
.estrellas span:nth-of-type(2)  {
  transform: rotate(50deg);
}
.estrellas span:nth-of-type(3)  {
  transform: rotate(25deg);
}
.estrellas span:nth-of-type(4)  {
  transform: rotate(0deg);
}
.estrellas span:nth-of-type(5)  {
  transform: rotate(-25deg);
}
.estrellas span:nth-of-type(6)  {
  transform: rotate(-50deg);
}
.estrellas span:nth-of-type(7)  {
  transform: rotate(-75deg);
}
/* Reverse mode */
.inverso {
  font-weight: bold;
}
.inverso span {
  line-height: 70px;
  transform-origin: bottom center;
  border: 1px solid red; /* Only for seeing trick */
}
  .modal-content {
    background-color: brown;
    position: relative;
    border-radius: 50%;
    width: 100%;
    height: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 600px;
  }




  Modal


<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      
      <center><h1 style="color: white">Unit 655,Tamani<br>Arts Tower,Business<br>Bay,Dubai,UAE<br>majid@silverlinegcc.com<br>Tel:04 577 4755<br>Cell:054 3099939</h1></center>
      
    </div>
    
  </div>
  
</div>
Posted
Updated 16-May-20 9:37am
v2

1 solution

Time to start reading: Curved Text Along a Path | CSS-Tricks[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900