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

Question

Есть следующий макет:

Написанный HTML:

<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 >

Написанный CSS:

.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

.ul{
    list-style: none;
    padding-left: 80px;
    position: relative;
    width: 200px;
}
h1{
    position: absolute;
    font-size: 15px;
    left: 0;
    transform: rotate(90deg);
    top: 60px;
    background-color: rgb(75, 47, 199);
}
p{
    font-size: 20px;
}

  <div class="ul">
    <h1>Lorem ipsum dolor</h1>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis magnam ullam quisquam tempore? Et, quia nihil soluta officiis nulla voluptatum.</p>
  </div>

Answer 2

Я бы не использовал transform: rotate(90deg), а использовал бы writing-mode: vertical-lr, он для этого специально предназначен, чтобы менять направление контента на странице.

Если вам нужно, чтобы текст шёл не сверху вниз, можно это поменять, использовав, как раз, transform: rotate(180deg)

Познакомиться с направлением контента на странице можно здесь https://developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions

*, *::before, *::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
}

.block-1__title {
  writing-mode: vertical-lr;
  background-color: black;
  color: white;
  padding: 10px;
  margin: 0;
  font-size: 1em;
}

.block-1 {
  display: grid;
  grid-template-columns: auto 1fr;
}

.block-1__content {
  background-color: grey;
  font-size: 30px;
}

<div class="block-1">
  <h1 class="block-1__title">Направление текста</h1>
  <div class="block-1__content">Какой-то контент</div>
</div>

Поменял направление:

*, *::before, *::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
}

.block-1__title {
  writing-mode: vertical-lr;
  background-color: black;
  color: white;
  padding: 10px;
  margin: 0;
  font-size: 1em;
  transform: rotate(180deg);
}

.block-1 {
  display: grid;
  grid-template-columns: auto 1fr;
}

.block-1__content {
  background-color: grey;
  font-size: 30px;
}

<div class="block-1">
  <h1 class="block-1__title">Направление текста</h1>
  <div class="block-1__content">Какой-то контент</div>
</div>

Я говорю направление контента, а не направление текста, потому что writing-mode направляет не просто текст, а контент.
display: flex обычно ставит элементы слева направо горизонтально. Но с writing-mode: vertical-lr это происходит вертикально. Браузер понимает поток документа и сам делает нужные вещи.

*, *::before, *::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
}

.block-1__title {
  writing-mode: vertical-lr;
  background-color: black;
  color: white;
  padding: 10px;
  margin: 0;
  font-size: 1em;
  display: flex;
  gap: 10px;
  
  
}

.block-1 {
  display: grid;
  grid-template-columns: auto 1fr;
}

.block-1__content {
  background-color: grey;
  font-size: 30px;
}

.box {
  background-color: orange;
  padding: 10px;
}

<div class="block-1">
  <h1 class="block-1__title">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
  </h1>
  <div class="block-1__content">Какой-то контент</div>
</div>

БЛОГ НА HUSL

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

Ответы (2 шт):