Question

已经有一段时间了，我一直在使用this来创建角落色带，到目前为止它一直很好用：

＆＃13;

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;
}

＆＃13;

<div class="picture">

    <div class="ribbon ribbon-top-left">
      <span>TEXT</span>
    </div>

    <img src="http://i.imgur.com/5lWqOGT.png" />
    
</div>

＆＃13;

这始终有效，因为功能区标记下方的图像始终具有固定尺寸，因此调整图像大小时，功能区会一起调整大小，并且两者都会变得更小（或更大）。

但是，我现在正在重新设计一个用户界面，我不希望事情在没有太多控制的情况下缩小或增长，因此我使用Bootsrap进行网格和vh /其他属性的vw单位，例如width，height，border ......

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

在这里，我们使用相同的代码，但现在让height: 60vh添加img：

＆＃13;

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;
}

＆＃13;

<div class="picture">

    <div class="ribbon ribbon-top-left">
      <span>TEXT</span>
    </div>

    <img src="http://i.imgur.com/5lWqOGT.png" />
    
</div>

＆＃13;

现在调整视口大小，然后您就会看到。

我尝试用vw / vh替换原始代码中使用的所有单位，但显然，这还不够 - 或者我做错了＆gt;。＆lt; < / p>

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

我已经测试了其他几个代码，但总的来说，所有这些代码都有一个固定尺寸的框，以便功能区工作，就像这个一样。我发现的最接近的是this pen，其中我可以移除其框尺寸，但是当使用vh单位添加图像时，同样的事情发生了。

Answer 1

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

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

您可以对font-size和line-height执行相同操作。见下面的小提琴。

演示：JSFiddle

Answer 2

这是我能得到的尽可能接近。我使用CSS calc()函数将vh乘以得到分数。它至少在Safari中看起来没问题。

＆＃13;

body {
  margin: 10%
}

img {
  border-radius: 0.5vw;
  height: 60vh;
}

.picture {
  position: relative;
}

.ribbon {
  position: absolute;
  left: calc(100vh * -0.01);
  top: calc(100vh * -0.01);
  z-index: 1;
  width: calc(100vh * 0.15); 
  height: calc(100vh * 0.15);
  overflow: hidden;
}
.ribbon span {
  font-size: calc(100vh * 0.025);
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: calc(100vh * 0.05);
  transform: rotate(-45deg) translate(-25%, -30%);
  -webkit-transform: rotate(-45deg) translate(-25%, -30%);
  width: calc(100vh * 0.15);
  display: block;
  background: #79A70A;
  background: linear-gradient(#9BC90D 0%, #79A70A 100%);
  box-shadow: 0 calc(100vh * 0.0075) calc(100vh * 0.0125) 0 rgba(0,0,0,0.4);
  position: absolute;
}

.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: calc(100vh * 0.01) solid #79A70A;
  border-right: calc(100vh * 0.01) solid transparent;
  border-bottom: calc(100vh * 0.01) solid transparent;
  border-top: calc(100vh * 0.01) solid #79A70A;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: calc(100vh * 0.01) solid transparent;
  border-right: calc(100vh * 0.01) solid #79A70A;
  border-bottom: calc(100vh * 0.01) solid transparent;
  border-top: calc(100vh * 0.01) solid #79A70A;
}

＆＃13;

<div class="picture">

    <div class="ribbon ribbon-top-left">
      <span>TEXT</span>
    </div>

    <img src="http://i.imgur.com/5lWqOGT.png">
    
</div>

＆＃13;

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

2 个答案: