Нужно сделать заголовок адаптивного блока с поворотом. Загвоздка в том, что блок адаптивный, ширина меняется относительно экрана, и высота может быть сколь угодно разная, в зависимости от внутреннего содержания. При повороте нужно учесть на какую ширину и высоту сместится блок при повороте, а она получается разная. Текст съезжает, ведь ширина становится высотой, а высота шириной. Помогите разобраться.
Как сохранить пропорции текста? Добавить еще одну обертку и повернуть в обратную сторону? Возможно ли это только с помощью 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;
}
Текст
Текст Разный текст
Сколько угодно текста текст
Неизвестное количество текста текст
Сколько угодно текста текст
Текст
Текст Разный текст
Сколько угодно текста текст
Неизвестное количество текста текст
Сколько угодно текста текст
Текст
Текст Разный текст
Сколько угодно текста текст
Неизвестное количество текста текст
Сколько угодно текста текст
Ответ
Используем предназначенный для этих целей 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);
}
Текст
Текст Разный текст
Сколько угодно текста текст
Неизвестное количество текста текст
Сколько угодно текста текст
Текст
Текст Разный текст
Сколько угодно текста текст
Неизвестное количество текста текст
Сколько угодно текста текст
Текст
Текст Разный текст
Сколько угодно текста текст
Неизвестное количество текста текст
Сколько угодно текста текст
Комментариев нет:
Отправить комментарий