Member 9983063 Ответов: 1

Я хочу сделать изогнутый текст по кругу


Здравствуйте я хочу сделать изогнутый текст в круге который у меня есть в моем проекте как какой то текст в центре круга а другой текст в углу круга изогнут я не знаю как это сделать пожалуйста помогите мне
Спасибо.

Что я уже пробовал:

.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>

1 Ответов

Рейтинг:
1

OriginalGriff

Пора приступать к чтению: Изогнутый текст вдоль контура | CSS-трюки[^]