Как сохранить повернутый текст баннера вертикально по центру, несмотря на длину строки?

Question

Как часть проекта, мне нужно разместить баннер / полосу текста над углом наших изображений, показывая только ту часть контейнера, на которой есть текст (добавьте или сделайте небольшой отступ). Но длина строки варьируется, что означает, что я не могу просто использовать верх / лево, как вы обычно это делаете.

На этом рисунке показана желаемая конечная цель:

Вот основной HTML / CSS, но я не могу понять, как сделать это адаптивным, каким оно должно быть? Есть решение CSS или, возможно, JS с математикой?

<div class="image">
    <img src="image.jpg">
    <div class="banner">
        <span class="banner-text">Banner Text</span>
    </div>
</div>

<style>
.image {
  position:relative;
}

.banner {
  position: absolute;
  width: 100%;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
}
</style>

Answer 1

После небольшого копания я нашел следующее решение.

.parent {
  overflow: hidden;
  /* required */
  width: 50%;
  /* for demo only */
  height: 250px/* some non-zero number */
  ;
  margin: 25px auto;
  /* for demo only */
  border: 1px solid grey;
  /* for demo only */
  position: relative;
  /* required  for demo*/
}

.ribbon {
  margin: 0;
  padding: 0;
  background: rebeccapurple;
  color: white;
  padding: 1em 0;
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(30%) translateY(0%) rotate(45deg);
  transform-origin: top left;
}

.ribbon:before,
.ribbon:after {
  content: '';
  position: absolute;
  top: 0;
  margin: 0 -1px;
  /* tweak */
  width: 100%;
  height: 100%;
  background: rebeccapurple;
}

.ribbon:before {
  right: 100%;
}

.ribbon:after {
  left: 100%;
}

<div class="parent">
  <h4 class="ribbon"> Hello Special</h4>
</div>

<div class="parent">
  <h4 class="ribbon">Very Special Sale Today</h4>
</div>

Answer 2

вы можете попытаться сдвинуть текст вниз перед поворотом, учитывая его длину, используя способ вычисления вертикального отступа, когда используется процент.

вот несколько примеров: (см. Комментарий в css)

figure {position:relative;
overflow:hidden;}
figcaption {
  position:absolute;
  top:0;
  padding:0.5em 3em 0.5em 2em;/* tune padding here*/
  background:linear-gradient(to top, green 2.25em, transparent 2.25em);/* draw only one line average background*/
  transform:rotate(-45deg);
  transform-origin:bottom left;
  box-sizing:border-box;/* include padding and border*/
  min-width:150px;/* tune this to have a minimal width and way down*/
}
/* push me down */
figcaption:before {
  content:'';
  display:inline-block;
  padding-top:90%/*  90% of my parent's width which i figcaption*/
}

<figure>
  <img src="http://dummyimage.com/300x128">
  <figcaption>caption </figcaption>
</figure>
<figure>
  <img src="http://dummyimage.com/300x128">
  <figcaption>caption text</figcaption>
</figure>
<figure>
  <img src="http://dummyimage.com/300x128">
  <figcaption>longer caption text</figcaption>
</figure>
<figure>
  <img src="http://dummyimage.com/300x128">
  <figcaption>bit longer caption text</figcaption>
</figure>
<figure>
  <img src="http://dummyimage.com/300x300">
  <figcaption>tiny bit longer caption text</figcaption>
</figure>

Анимированная демонстрация, демонстрирующая эффект заполнения, для лент слева и справа

figure {
  position: relative;
  overflow: hidden;
  display: inline-block;
margin:0;
}

.left figcaption {
  position: absolute;
  top: 0;
  padding: 0.5em 3em 0.5em 2em;
  /* tune padding here*/
  background: linear-gradient( to top, green 2.2em, transparent 2.25em);
  /* draw only one line average background*/
  transform: rotate(-45deg);
  transform-origin: bottom left;
  box-sizing: border-box;
  /* include padding and border*/
  min-width: 150px;
  /* tune this to have a minimal width and way down*/
  /* animation for demo */
  animation: txtin 2s steps(4) alternate infinite;
  word-spacing: 2em;
  color: white
}


/* push me down */

.left figcaption:before {
  content: "";
  display: inline-block;
  padding-top: 94%;
  /*  90% of my parent's width which i figcaption*/
}

.right figcaption {
  position: absolute;
  top: -3.5em;
  right: -6em;
  padding: 0.5em 4em;
  /* tune padding here*/
  background: green;
  /* draw only one line average background*/
  transform: rotate(45deg);
  transform-origin: bottom left;
  box-sizing: border-box;
  /* include padding and border*/
  min-width: 12.5em;
  /* tune this to have a minimal width and way down*/
  overflow: hidden;
  /* demo */
  animation: txtin 2s steps(4) alternate infinite;
  word-spacing: 2em;
  color: white
}

@keyframes txtin {
  to {
    text-indent: -21em;
    color: yellow
  }
}

<figure class="right">
  <img src="http://dummyimage.com/300x300/0af/&text=right_ribbon_of_any_length">
  <figcaption>ribbon animated demo</figcaption>
</figure>
<figure class="left">
  <img src="http://dummyimage.com/300x300/0df/&text=left_ribbon_of_any_length">
  <figcaption>ribbon animated demo</figcaption>
</figure>