2

введите сюда описание изображения

Подскажите пожалуйста, возможно ли сверстать данную инфографику? И как правильно поступать с подобными случаями, верстать или же экспортировать графику?

1 ответ 1

2

Такое можно сверстать.

Текст по кругу сделал по этому гайду: https://myrusakov.ru/js-circle-text.html

Линию сделал с помощью блока div и псевдоэлементов.

Готовый вариант:

let element = document.querySelectorAll('span');
for (let i = 0; i < element.length; i++) {
  element[i].style.transform = "rotate(" + i * 12 + "deg)";
}
body {
  background-color: rebeccapurple;
}

.info {
  display: inline-block;
  position: relative;
}

.info__line {
  border: 2px solid #ffd446;
  border-top: none;
  position: absolute;
  width: 100px;
  height: 100px;
  bottom: -30px;
  left: 56px;
  box-sizing: border-box;
}

.info__line:before,
.info__line:after {
  content: '';
  display: block;
  background-color: #ffd446;
  position: relative;
}

.info__line:before {
  width: 140px;
  height: 2px;
  right: -101%;
}

.info__line:after {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  right: -241%;
  transform: translateY(-55%);
}

.info__content {
  display: inline-block;
  width: 100px;
  border: 3px solid #ffd446;
  border-radius: 100px;
  padding: 5px 5px 50px 5px;
  font-family: sans-serif;
  background-color: rebeccapurple;
  position: relative;
}

.info__circle {
  width: 100px;
  height: 100px;
  background-color: #ffd446;
  border-radius: 50%;
  margin-bottom: 30px;
  position: relative;
  align-items: center;
  display: flex;
  justify-content: center;
}

.info__circle:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: black;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.info__circle div {
  position: absolute;
  font-size: .6em;
  color: #37474F;
  text-align: center;
  pointer-events: none;
  user-select: none;
}

.info__circle div span {
  position: absolute;
  top: -45px;
  display: inline-block;
  transform-origin: 0 45px;
}

.info__value {
  color: #ffd446;
  text-align: center;
}

.info__value div:first-child {
  font-size: 30px;
  font-weight: 700;
}

.info__value div:last-child {
  font-size: 12px;
}
<div class="info">
  <div class="info__line"></div>
  <div class="info__content">
    <div class="info__circle">
      <div>
        <span>L</span>
        <span>e</span>
        <span>а</span>
        <span>r</span>
        <span>n</span>
        <span> </span>
        <span>t</span>
        <span>o</span>
        <span> </span>
        <span>E</span>
        <span>a</span>
        <span>r</span>
        <span>n</span>
        <span>.</span>
        <span> </span>
        <span>L</span>
        <span>e</span>
        <span>а</span>
        <span>r</span>
        <span>n</span>
        <span> </span>
        <span>t</span>
        <span>o</span>
        <span> </span>
        <span>E</span>
        <span>a</span>
        <span>r</span>
        <span>n</span>
        <span>.</span>
      </div>
    </div>
    <div class="info__value">
      <div>23k</div>
      <div>Gamer's</div>
    </div>
  </div>
</div>

4
  • Хорошее решение (+), но я бы предложил использовать SVG, текст на круге кривыми, а текст "23k Gamer's" отдельным блоком HTML, ибо в SVG с текстами не очень..
    – De.Minov
    30 июл 2022 в 8:30
  • Вау, очень круто, спасибо! Стоит ли это того? Как делать лучше верстка или же экспорт как графику?
    – rvng
    30 июл 2022 в 13:34
  • @rvng , по мне так верстка всегда лучше графики: от такой практики хорошо растет опыт, еще и сайт быстрее грузится :)
    – NDMX
    30 июл 2022 в 13:46
  • Спасибо большое! Только начинаю, вот и копаю макеты с фигмы, пытаясь научиться)
    – rvng
    30 июл 2022 в 14:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.