Как прижать блок к краю который повернутый по вертикали?

202

19 сентября 2017, 06:01

Доброго времени суток, нужно сделать вот такие вкладки (prntscr.com/gm666f). Они должны быть прижаты к краю окна и находится в секции с контентом поэтому position: fixed не подходит. То есть, есть вот такая разметка. Я пробовал задать секции position: relative; а диву с кнопками position: absolute; top: 0; right: 0; transform: rotate(-90deg); что бы его повернуть, но он не прижимается к краю, попробовал добавить right: -26%; столько нужно чтобы прижать к краю блок, но если изменить разрешение все едет, этот вариант не сработал. Так на сколько я понял он не прижимается из-за transform. Подскажите пожалуйста как это сделать ?

Answer 1

.parent { 
  font-family: Sans-Serif; 
  position: absolute; 
  width: 50%; 
  right: 0; 
  top: 0; 
  height: 500px; 
  background-color: gray; 
} 
 
.buttons { 
  display:block; 
  position: absolute; 
  right: 100%; top:0; 
  transform-origin: 100% 100%; 
  transform: rotate(-90deg); 
  white-space: nowrap 
} 
 
.buttons span { 
  display: inline-block; 
  margin: 0 10px; 
  padding: 10px; 
  border-radius: 10px 10px 0 0; 
  background-color: yellow; 
  color: black; 
}

<div class='parent'> 
  <div class='buttons'> 
    <span>Обратная связь</span> 
    <span>Отзывы</span> 
  </div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Навигация по записям из бд

Пример: страницы поиска google (1,2,3

266

Я создал расширения для хрома)И мне нужно увеличить в размерах окно которое открылось при нажатии на иконку расширения)

HTML

Как прижать блок к краю который повернутый по вертикали?

Навигация по записям из бд

Я создал расширения для хрома)И мне нужно увеличить в размерах окно которое открылось при нажатии на иконку расширения)

Загрузить XML файл из Assets

Обработка ошибок