Повернутый текст на левой границе отзывчивого элемента - PullRequest
Новая
       22

Повернутый текст на левой границе отзывчивого элемента

1 голос
/ 14 апреля 2020

Я сталкиваюсь с проблемой создания текста вокруг границ div с динамическим c содержимым / изображениями. Вот код html: 

<div class="fp-wrapper">
  <a href="/url1">
    <img class="fp-image" src="image1.jpg">
  </a>
  <p class="fp-title1">Text on top border</p>
  <p class="fp-title2">Text on left border</p>
</div>

css: 

.fp-wrapper {
    position: relative;
    display: inline-block;
    margin: auto;
}
.fp-image {
    width: 80%;
    float:left;
    padding: 10px;
    border: 1px solid #53565a;
    z-index: 1;
}
.fp-title1, .fp-title2{
    padding: 0 10px;
    background: #fff;
    position: absolute;
    top: 0;
    left: 30px;
    color: #53565a;
    text-transform: uppercase;
    font-weight: 500;
}
.fp-title2 {
    bottom: 50%;
    top: unset !important;
    transform: translate(-50%,-50%) rotate(-90deg);
}

Скрипка: https://jsfiddle.net/wutzbvef/

Теперь проблема в том, что содержимое является динамическим c, поэтому min-height / max-height или отрицательные поля не будут работать (я так думаю). Также мне нужно сделать его отзывчивым, прикрывая границы. Является ли этот подход правильным или нужно сделать это каким-то другим подходом. Пожалуйста, помогите.

Редактировать: Возможно, я не объяснил лучше, но я в основном хочу выровнять по вертикали верх повернутого абзаца на -90 градусов, то есть .fp-title2

Ответы [ 2 ]

1 голос
/ 14 апреля 2020

Использование transform-origin

.fp-wrapper {
  position: relative;
  display: inline-block;
  margin-left: 50px;
}

.fp-image { 
  width: 100%;
  padding: 10px;
  border: 1px solid #53565a;
  z-index: 1;
}

.fp-title1,
.fp-title2 {
  padding: 0 10px;
  background: #fff;
  position: absolute;
  top: 0;
  left: 30px;
  color: #53565a;
  text-transform: uppercase;
  font-weight: 500;
}

.fp-title2 {
  transform: translate(-100%, 0%) rotate(-90deg);
  transform-origin: right center;
}

.w2 .fp-image {
  width: 80%;
}

.w3 .fp-image {
  width: 60%;
}
<div class="fp-wrapper">
  <a href="/url1">
    <img class="fp-image" src="https://i.ibb.co/y6XYb0z/image1.jpg">
  </a>
  <p class="fp-title1">Text on top border</p>
  <p class="fp-title2">Text on left border</p>
</div>

<div class="fp-wrapper w2">
  <a href="/url1">
    <img class="fp-image" src="https://i.ibb.co/y6XYb0z/image1.jpg">
  </a>
  <p class="fp-title1">Text on top border</p>
  <p class="fp-title2">Text on left border</p>
</div>


<div class="fp-wrapper w3">
  <a href="/url1">
    <img class="fp-image" src="https://i.ibb.co/y6XYb0z/image1.jpg">
  </a>
  <p class="fp-title1">Text on top border</p>
  <p class="fp-title2">Text on left border</p>
</div>
1 голос
/ 14 апреля 2020

Попробуйте сначала повернуть, затем перецентрировать div. В противном случае все в порядке. 

    transform:  rotate(-90deg) translate(-50%, -50%);

Вы также можете использовать переменный размер шрифта для небольших изображений. (Я бы также использовал: после класса для этого кстати), используйте тег, как это: 

.fp-wrapper {

}
.fp-wrapper a {
  width: 40%;
  display:inline-block;
  position: relative;
  z-index:1;
  float:left;
  padding: 10px;
  border: 1px solid #53565a;

}
.fp-image {
    width: 100%;
}

.fp-wrapper a:before{
    position: absolute;
    content:'text top';
    padding: 0 10px;
    background: #fff;
    display:inline-block;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    color: #53565a;
    text-transform: uppercase;
    font-weight: 500;
    z-index:20;
}
.fp-wrapper a:after {
  position:absolute;
  content:"left text";
  display:inline-block;
  text-transform: uppercase;
  font-weight: 500;
  padding: 0 10px;
  top:50%;  
  transform: translateX(-50%) rotate(-90deg);
  left:10px;
  z-index:10;
  background-color:#fff;
  
}
<div class="fp-wrapper">
        <a href="/url1">
            <img class="fp-image" src="https://i.ibb.co/y6XYb0z/image1.jpg">
        </a>
</div>

<div class="fp-wrapper">
        <a href="/url1" style="width:30%;">
            <img class="fp-image" src="https://i.ibb.co/y6XYb0z/image1.jpg">
        </a>
</div>
...