javascript - 尽管字符串长度，如何保持旋转的横幅文本垂直居中？

Question

作为项目的一部分，我需要在图像的一角有一个横幅/文本条，只显示与文本一样多的容器（给予或采取一些填充）。但是字符串的长度会有所不同，这意味着我不能像往常一样简单地使用 top/left 。

这张图片显示了期望的最终目标：

这是核心 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>

标签： javascriptjqueryhtmlcss

Answer 1

您可以尝试在旋转之前向下移动文本，同时考虑到它的长度，使用百分比时计算垂直填充的方式。

这是几个例子：（见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>