Question Rubans CSS redimensionnés en conséquence


Depuis quelque temps déjà je me sers de ce pour créer des rubans de coin et jusqu'à présent, cela a toujours bien fonctionné:

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>

Cela a toujours fonctionné parce que l'image située sous le balisage du ruban avait toujours des dimensions fixes. Ainsi, lorsque l'image est redimensionnée, le ruban est redimensionné et les deux deviennent plus petits (ou plus gros).

Cependant, je suis en train de redéfinir une interface utilisateur dans laquelle je ne veux pas que les choses se réduisent sans grand contrôle, alors j'utilise Bootsrap pour la grille et vh / vw unités pour d'autres propriétés comme width, height, border...

Et c'est le problème avec ce code ruban. Dans cette nouvelle approche, lors du redimensionnement de la fenêtre d'affichage, l'image (pour cet exemple) change à peine de ses dimensions, mais le ruban, car créé en pixels, devient trop petit (ou trop grand).

Ici, prenons le même code ci-dessus, mais maintenant ajoutons un height: 60vh au 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>

Redimensionnez maintenant la fenêtre et vous verrez.

J'ai essayé de remplacer toutes les unités utilisées dans le code d'origine par vw / vh mais apparemment, cela ne suffit pas - ou je fais quelque chose de mal.

Alors, est-il possible de créer ces rubans et de les rendre fluides, réactifs, fixes ... (je ne suis pas sûr du bon terme ici, désolé) et de les rendre proportionnels à la fenêtre d'affichage lors du redimensionnement comme l'image?

J'ai testé plusieurs autres codes, mais en résumé, tous ont une boîte avec des dimensions fixes pour que le ruban fonctionne, tout comme celui-ci. Le plus proche que j'ai trouvé était Ce stylo dans lequel j'ai pu supprimer ses dimensions de boîte mais en ajoutant l'image avec le vh unité, la même chose s'est produite.


12
2017-07-18 15:39


origine


Réponses:


Si vous redimensionnez la largeur et la position avec CSS vh (puisque vous êtes déjà en train de redimensionner la hauteur de votre image avec vh), vous pouvez l'ajuster de manière réactive:

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

Vous pourriez faire la même chose avec le font-size et line-height. Voir le violon ci-dessous.

Démo: JSFiddle


4
2017-07-18 16:30



C'est aussi proche que possible. J'ai utilisé le CSS calc() fonction de multiplier vh pour obtenir des fractions. Cela semble correct au moins dans Safari.

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;
}
<div class="picture">

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

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


1
2017-07-18 17:09