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

Question

[Meekwest]

Существует главный экран на проекте. Хедер лежит поверх картинки. Левая колонка аналогично лежит поверх всего. Как мне сверстать их друг на друге?

<div>
      <Header className={styles.header} />
      <div className={styles.image_sidebar_block}>
        <div className={styles.sidebar}>
          <Button color="black">Регистрация</Button>
          <Logo />
        </div>
        <div className={styles.image}>
          <Image
            className={styles.main_image}
            src={mainPage}
          />
        </div>
      </div>

      <Footer />
    </div >

.header {
	z-index: 1;
	position: absolute;
	width: 100%;
}


.sidebar {
	position: absolute;
	width: 100px;
	height: 699px;
	left: 0px;
	top: 0px;
	z-index: 1;
	background: var(--light-gray);
}

Получаю:

Answer 1

[wadowad]

Сверстайте sidebar сначала без поворота. Поменяйте значение у width и height местами. Затем поверните на 90 градусов против часовой стрелки с помощью transform: rotate. Позиционируйте центр поворота в нужное место с помощью transform-origin.

Comments

[Meekwest]

Да, получилось повернуть. Только как привязать ширину этого блока к высоте картинки? Чтобы оно всегда было одинаково. В противном случае мне достаточно изменить размер экрана на несколько пикселей, картинка responsive меняется по размеру в соответствии с пропорциями, а sidebar теряется в размерах.

[wadowad]

Meekwest, на ум приходит вариант задать одинаковую высоту header и ширину sidebar, например, 10 vmin.

Answer 2

[Froggyweb]

можно еще так: https://developer.mozilla.org/ru/docs/Web/CSS/writ...