相应调整视口大小的CSS色带

Question

已经有一段时间了,我一直在使用它来创建角落色带,到目前为止它始终工作正常:

body {
  margin: 10%
}

img {
  border-radius: 0.5vw;
}

.picture {
  position: relative;
}

.ribbon {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#9BC90D 0%, #79A70A 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #79A70A;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #79A70A;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #79A70A;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #79A70A;
}

<div class="picture">

    <div class="ribbon ribbon-top-left">
      <span>TEXT</span>
    </div>

    <img src="http://i.imgur.com/5lWqOGT.png" />
    
</div>

这总是有效,因为功能区标记下方的图像始终具有固定的尺寸,因此在调整图像大小时,功能区会一起调整大小,并且两者都会变得更小(或更大).

不过,我现在重新设计中,我不想要的东西缩小或增长没有太多的控制UI,所以我用Bootsrap为网格和vh/ vw单位像其他一些性质width,height,border...

这是此功能区代码的问题.在这种新方法中,当调整视口大小时,图像(对于此示例)几乎不会改变其尺寸,但是因为以像素为单位创建的色带太小(或太大).

在这里,让我们以上述相同的代码,但现在让我们添加一个height: 60vh到img:

body {
  margin: 10%
}

img {
  border-radius: 0.5vw;
  height: 60vh;
}

.picture {
  position: relative;
}

.ribbon {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#9BC90D 0%, #79A70A 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #79A70A;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #79A70A;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #79A70A;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #79A70A;
}

<div class="picture">

    <div class="ribbon ribbon-top-left">
      <span>TEXT</span>
    </div>

    <img src="http://i.imgur.com/5lWqOGT.png" />
    
</div>

现在调整视口大小,你会看到.

我试图用vw/ 替换原始代码中使用的所有单位vh但显然,这还不够 - 或者我做错了什么>.<

那么,是否有可能创建这些色带并使它们流畅,反应灵敏,固定......(我不确定这里的正确用语,对不起)并在调整图像大小时使它们与视口成比例？

我已经测试了其他几个代码,但总的来说,所有这些代码都有一个固定尺寸的盒子,可以使色带工作,就像这个一样.我发现的最接近的是这支笔,我可以移除它的盒子尺寸但是当用vh单元添加图像时,同样的事情发生了.

Answer 1

如果您使用 CSS 缩放宽度和位置vh（因为您已经使用 缩放图像高度vh），则可以响应式调整它：

width: 40vh;
top: 9.3vh;
left: -7.7vh;

您可以对font-size和执行同样的操作line-height。请参阅下面的小提琴。

演示：JSFiddle