Skip to main content
se eliminaron 47 caracteres en el cuerpo
Origen Enlace
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92

Actualmente muestro un texto en el extremo superior de una imagen:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
}

.text-block {
  position: absolute;
  color: white;
    position: absolute;
  top: 0px;
  left: 0px;
  background-color:#17d90d;
  font-weight: bold;
  padding:5px;

}
</style>
</head>
<body>

<h2>Image Text Blocks</h2>

<div class="container">
  <img src="img_nature_wide.jpg" alt="Nature" style="width:100%;">
  <div class="text-block">
    Oferta
  </div>
</div>

</body>
</html> 

 .container {
  position: relative;
}

.text-block {
  position: absolute;
  color: white;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color:#17d90d;
  font-weight: bold;
  padding:5px;
  

}
<h2>Image Text Blocks</h2>
<div class="container">
  <img src="http://lorempixel.com/640/360" alt="Nature" style="width:100%;">
  <div class="text-block">
    Oferta
  </div>
</div>

Pero que deseo es que la palabra oferta se muestre en diagonal, e intentado con rotate, pero me sale mal. Lo que deseo es que se vea así:

introducir la descripción de la imagen aquí

La idea es que el texto de la palabra oferta se muestre igual al de la foto. ¿Como se podría hacer?

Actualmente muestro un texto en el extremo superior de una imagen:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
}

.text-block {
  position: absolute;
  color: white;
    position: absolute;
  top: 0px;
  left: 0px;
  background-color:#17d90d;
  font-weight: bold;
  padding:5px;

}
</style>
</head>
<body>

<h2>Image Text Blocks</h2>

<div class="container">
  <img src="img_nature_wide.jpg" alt="Nature" style="width:100%;">
  <div class="text-block">
    Oferta
  </div>
</div>

</body>
</html> 

Pero que deseo es que la palabra oferta se muestre en diagonal, e intentado con rotate, pero me sale mal. Lo que deseo es que se vea así:

introducir la descripción de la imagen aquí

La idea es que el texto de la palabra oferta se muestre igual al de la foto. ¿Como se podría hacer?

Actualmente muestro un texto en el extremo superior de una imagen:

 .container {
  position: relative;
}

.text-block {
  position: absolute;
  color: white;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color:#17d90d;
  font-weight: bold;
  padding:5px;
  

}
<h2>Image Text Blocks</h2>
<div class="container">
  <img src="http://lorempixel.com/640/360" alt="Nature" style="width:100%;">
  <div class="text-block">
    Oferta
  </div>
</div>

Pero que deseo es que la palabra oferta se muestre en diagonal, e intentado con rotate, pero me sale mal. Lo que deseo es que se vea así:

introducir la descripción de la imagen aquí

La idea es que el texto de la palabra oferta se muestre igual al de la foto. ¿Como se podría hacer?

Origen Enlace
Danilo
  • 2.5k
  • 6
  • 51
  • 103

¿Como mostrar el texto en diagonal en el extremo superior de una imagen con CSS?

Actualmente muestro un texto en el extremo superior de una imagen:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
}

.text-block {
  position: absolute;
  color: white;
    position: absolute;
  top: 0px;
  left: 0px;
  background-color:#17d90d;
  font-weight: bold;
  padding:5px;

}
</style>
</head>
<body>

<h2>Image Text Blocks</h2>

<div class="container">
  <img src="img_nature_wide.jpg" alt="Nature" style="width:100%;">
  <div class="text-block">
    Oferta
  </div>
</div>

</body>
</html> 

Pero que deseo es que la palabra oferta se muestre en diagonal, e intentado con rotate, pero me sale mal. Lo que deseo es que se vea así:

introducir la descripción de la imagen aquí

La idea es que el texto de la palabra oferta se muestre igual al de la foto. ¿Como se podría hacer?