Как повернуть линии часов на 90 градусов в CSS и поместить текст перед ним? - PullRequest
Новая
       25

Как повернуть линии часов на 90 градусов в CSS и поместить текст перед ним?

0 голосов
/ 24 сентября 2018

У меня следующая CSS-структура, которая немного сложнее.Полный код помещен в этот JSFiddle , и я бьюсь над последним соображением, которое мне нужно реализовать.

Между горизонтальными линиями (которые находятся на одной линии с кругами)Мне нужно было бы повернуть дополнительные линии на 90 градусов и иметь текст перед ним.Это должно выглядеть примерно так: на этой картинке , где я добавил недостающие элементы красным цветом.

Я уже пытался реализовать что-то подобное, как в скрипте по ссылке выше, но этоне работает, как ожидалось.Обратите внимание, что в HTML также есть некоторый встроенный CSS, который является динамическим и генерируется во время выполнения.

В качестве примечания я попытался добавить этот новый элемент HTML, но я бы предпочел не делать этого.используйте встроенный стиль с целью добавления этих строк (если это возможно).Вот CSS и HTML для вновь добавленных элементов: 

.chart .left-line {
  transform: rotate(-90deg);
  display: flex;
  align-items: center;
  position: absolute;
  right: -257px;
  width: 530px;
  z-index: 10;
  top: 245px;
}

.chart .left-line hr {
  width: 100%;
  background: #1d2026;
  opacity: 0.25;
}

.chart .left-line-container {
  width: 100%;
  font-family: Open Sans;
  font-size: 12px;
  color: #1d2026;
  font-weight: 700;
  margin: 0 16px;
  -webkit-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
<div class="left-line-container" style="top: 135px;">
  <hr class="left-line-hr"> 12.34
</div>

Ответы [ 2 ]

0 голосов
/ 24 сентября 2018

Вы можете использовать следующий код для решения вашей проблемы: 

hr{
    width: 1px;
    height: 100%
}
0 голосов
/ 24 сентября 2018

Я надеюсь, что это может помочь: 

.flex-parent {
  display: flex;
  width: 100%;
  height: 180px;
  align-items: center;
  padding: 50px 0;
  transform: rotate(-90deg);
}

.flex-child-edge {
  flex-grow: 2;
  height: 1px;
  background-color: #e3e3e3;
  border: 0.5 #e3e3e3 solid;
}
.flex-child-text {
  flex-basis: auto;
  flex-grow: 0;
  margin: 0px 5px 0px 5px;
  text-align: center;
  padding: 20px;
  font-size: 13px;
  line-height: 150%;
color: #777777;
	letter-spacing: 3px;
}
 <div class="flex-parent">
        <div class="flex-child-edge"></div>
        <div class="flex-child-text">text here</div>
        <div class="flex-child-edge"></div>
      </div>
...