CSS повернутый элемент внизу без высоты и ширины - PullRequest
Новая
       9

CSS повернутый элемент внизу без высоты и ширины

0 голосов
/ 23 сентября 2018

У меня проблема с абсолютным позиционированием элемента с помощью transform: rotate () css.Я читал другие посты на SO с похожей проблемой и использовал некоторые решения, но все еще не решил свою проблему.Я пробовал transform-origin и т. Д.

Я хочу разместить повернутую ссылку в любой позиции X: слева, в центре, вправо и Y: внизу заголовка.Мне нужно решение, в котором я не знаю ширину, высоту элемента (разные тексты).

Я думаю, что у меня есть решение на 90%, но проблема в том, что моя ссылка не размещена там, где я хочу.Положение X изменяется с длиной текста.

У меня есть рабочий код ниже: 

<!doctype html>
<html lang="pl">
<head>    
  <meta charset="utf-8">    
  <style>
  body {
    background: #333333;
    font-family: Arial, sans-serif;
  }
  
  .header-content {
    background: #cccccc;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 712px;
    margin: 0 auto;			
    padding: 0 45px;
    position: relative;
    width: 1200px;
  }
  
  .link-decor {
    border-top: 2px solid #ed217c;
    color: #ffffff;			
    font-size: 14px;			
    position: absolute;
    bottom: 0;
    left: 50%;
    padding-left: 30px;			
    transform: rotate(-90deg) translate(50%, -100%);		
    transform-origin: bottom;
  }
  </style>
</head>
<body>
  
  <div class="header-content">
    <div>
      <h1>LOREM<br>IPSUM</h1>
      <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum tristique sapien eget magna rutrum, ac fringilla diam elementum. </p>
      <a href="#">learn more</a>
    </div>
    <a href="#" class="link-decor">webpageeeeeee<br>scrollersbarrrrrrrrssssssssssssssss</a>
  </div>        
  
</body>
</html>

Спасибо за любой ответ.

1 Ответ

0 голосов
/ 23 сентября 2018

Я изменил ваш HTML, чтобы он был таким: 

<div class="header-content">
<div class="in-header"> <!-- add class in-header here -->
  <h1>LOREM<br>IPSUM</h1>
  <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum tristique sapien eget magna rutrum, ac fringilla diam elementum. </p>
  <a href="#">learn more</a>
  <a href="#" class="link-decor">webpageeeeeee<br>scrollersbarrrrrrrrssssssssssssssss</a>
</div>

Я добавил класс к первому дочернему элементу div.header-content и поместил элемент, который вы хотите повернуть, внутри этогоdiv не вне его, как вы делали.

Затем я изменил стиль для .link-decor на 

.link-decor {
    border-top: 2px solid #ed217c;
    color: #ffffff;
    font-size: 14px;
    position: absolute;
    top: 100%;
    left: 0px;
    padding-left: 30px;
    transform: rotate(-90deg) translate(-100%, 0);
    transform-origin: 0 0;
}

и добавил позицию относительно нового класса .in-header

body {
    background: #333333;
    font-family: Arial, sans-serif;
  }
  
  .header-content {
    background: #cccccc;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 712px;
    margin: 0 auto;			
    padding: 0 45px;
    position: relative;
    width: 1200px;
  }
  .in-header{
    position: relative;
  }
  
  .link-decor {
    border-top: 2px solid #ed217c;
    color: #ffffff;
    font-size: 14px;
    position: absolute;
    top: 100%;
    left: 0px;
    padding-left: 30px;
    transform: rotate(-90deg) translate(-100%, 0);
    transform-origin: 0 0;
  }
<!doctype html>
<html lang="pl">
<head>    
  <meta charset="utf-8">    
</head>
<body>
  
  <div class="header-content">
    <div class="in-header">
      <h1>LOREM<br>IPSUM</h1>
      <p>Dolor sit amet, consectetur adipiscing elit. Vestibulum tristique sapien eget magna rutrum, ac fringilla diam elementum. </p>
      <a href="#">learn more</a>
      <a href="#" class="link-decor">webpageeeeeee<br>scrollersbarrrrrrrrssssssssssssssss</a>
    </div>
  </div>        
  
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...