10

Нужно сделать заголовок адаптивного блока с поворотом. Загвоздка в том, что блок адаптивный, ширина меняется относительно экрана, и высота может быть сколь угодно разная, в зависимости от внутреннего содержания. При повороте нужно учесть на какую ширину и высоту сместится блок при повороте, а она получается разная. Текст съезжает, ведь ширина становится высотой, а высота шириной. Помогите разобраться.

Как сохранить пропорции текста? Добавить еще одну обертку и повернуть в обратную сторону? Возможно ли это только с помощью css?

Желаемый результат, заголовок(красным) должен быть расположен по центру, по вертикали и по горизонтали:

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

Сейчас вот так:

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

Пример кода:

.block{
  position:relative;
  padding-left:5rem;
  margin:0 auto;
  width:50%;
}
.pin{
  position:absolute;
  display:block;
  top:0;
  left:0;
  bottom:0;
  width:3rem;
  height:100%;
  background:rgba(221, 221, 221, 0.5);
}
.pin span{
  position:absolute;
  display:inline-block;
  top:0;
  left:0;
  right:0;
  bottom:0;
  vertical-align:bottom;
  text-align:center;
  transform:rotate(-90deg);
  background:rgba(221, 221, 221, 0.5);
  color:red;
}
<div class="block">
  <div class="pin"><span>Заголовок</span></div>
  
  <p class="text">Текст</p>
  <p class="text">Текст Разный текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Неизвестное количество текста текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Текст</p>
  <p class="text">Текст Разный текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Неизвестное количество текста текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Текст</p>
  <p class="text">Текст Разный текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Неизвестное количество текста текст</p>
  <p class="text">Сколько угодно текста текст</p>
</div>

0

3 ответа 3

7

Используем предназначенный для этих целей writing-mode: vertical-lr + transform: rotate(180deg). Центрировать надпись внутри будем при помощи флексбокса.

.block {
  position: relative;
  padding-left: 5rem;
  margin: 0 auto;
  width: 50%;
}
.pin {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3rem;
  height: 100%;
  background: rgba(221, 221, 221, 0.5);
  writing-mode: vertical-lr;
  display: flex;
}
.pin span {
  margin: auto;
  transform: rotate(180deg);
}
<section class="block">
  <h1 class="pin"><span>Заголовок</span></h1>
  
  <p class="text">Текст</p>
  <p class="text">Текст Разный текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Неизвестное количество текста текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Текст</p>
  <p class="text">Текст Разный текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Неизвестное количество текста текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Текст</p>
  <p class="text">Текст Разный текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Неизвестное количество текста текст</p>
  <p class="text">Сколько угодно текста текст</p>
</section>

edited: поскольку вопрос популярен, а код явно копируют, решил поправить разметку.

7
  • у меня это ужасно выглядит -- совсем ни как на макете
    – user33274
    29 мая 2017 в 8:31
  • @МаксимЛенский ваш баг-репорт не очень-то информативен. 29 мая 2017 в 8:32
  • chat.stackexchange.com/rooms/59486/… здесь скрин
    – user33274
    29 мая 2017 в 8:33
  • 1
    Если у вас Сафари, то это вполне возможно, поскольку writing-mode для иос все еще надо писать с префиксом. Однако, как хорошо, что это всего-лишь сниппет и в продакшен люди выливают код после автопрефиксера :-) 29 мая 2017 в 8:36
  • это же обычный win7 .. ie11
    – user33274
    29 мая 2017 в 8:37
4

Вот так работает, но только если текст в одну строку, без переносов.

.block {
  margin: 0 auto;
  padding-left: 5rem;
  position: relative;
  width: 50%;
}

.pin {
  background: rgba(221, 221, 221, 0.5);
  bottom: 0;
  display: block;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 3rem;
}

.pin span {
  bottom: 50%;
  color: red;
  display: inline-block;
  left: -500px;
  position: absolute;
  right: -500px;
  text-align: center;
  transform-origin: center center 0;
  transform: rotate(-90deg);
  white-space:nowrap;
}
<div class="block">
  <div class="pin"><span>Заголовок</span></div>

  <p class="text">Текст</p>
  <p class="text">Текст Разный текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Неизвестное количество текста текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Текст</p>
  <p class="text">Текст Разный текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Неизвестное количество текста текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Текст</p>
  <p class="text">Текст Разный текст</p>
  <p class="text">Сколько угодно текста текст</p>
  <p class="text">Неизвестное количество текста текст</p>
  <p class="text">Сколько угодно текста текст</p>
</div>

Или смотреть код на jsfiddle

1
  • Спасибо, ваш пример тоже хорош, отметила предыдущий ответом, т к - ответ был раньше вашего.
    – kizoso
    29 мая 2017 в 8:01
0

Так вроде ... без всяких трудностей

*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
.r{
width:50px;
height:100%;
background:#ccc;
text-align:center;
line-height:50px;
-webkit-writing-mode: vertical-rl;
writing-mode:tb-rl;
 font: Consolas, Monaco, monospace;
}
.r span{
display:inline-block;
transform:rotate(-90deg);
font-size:30px;
height:4vh;
color:#fff;
}
@media screen and (max-height:520px){
.r span{
	display:inline-block;
	height:6vh;
}
}
<div class="r">
	<span>п</span>
	<span>р</span>
	<span>и</span>
	<span>м</span>
	<span>е</span>
	<span>р</span>
</div>

3
  • ваш пример не адаптивный, а фиксированный
    – kizoso
    29 мая 2017 в 7:59
  • если ваш ответ не будет дублем готового ответа, то давайте. интересно посмотреть
    – kizoso
    29 мая 2017 в 8:02
  • вы либо невнимательно прочитали задание, либо не понимаете принцип адаптивности, спасибо, но к сожалению ваш ответ как раз не подходит
    – kizoso
    29 мая 2017 в 8:11

Ваш ответ

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

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