4

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?

2 respuestas 2

7

Esta es una forma de hacerlo, agregando un contenedor para darle la forma triangular, y rotando el texto:

.container {
  position: relative;
}

#triangle-topleft {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 0;
  height: 0;
  border-top: 100px solid #17d90d;
  border-right: 100px solid transparent;
  }

.text-block {
  color: white;
  position: relative;
  top: -60px;
  left: 15px;
  font-weight: bold;
  padding:5px;
  transform: rotate(-45deg);
}
<h2>Image Text Blocks</h2>
<div class="container">
  <img src="http://lorempixel.com/640/360" alt="Nature" style="width:100%;">
  <div id="triangle-topleft">
    <div class="text-block">
      Oferta
    </div>
  </div>
</div>

1
  • @BetaM gracias por el voto y por el comentario, edité la respuesta con una pequeña explicación
    – Erica T.
    Commented el 12 ago. 2020 a las 22:57
0

principalmente deberías agregar una etiqueta a tu texto para que puedas manipular solo esa sección algo asi:

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

ahora dentro de tu css agregas la siguiente linea:

.text-block span {
  transform: rotate(-45deg);
 }

Espero te sea de ayuda

1
  • Gracias por la respuesta, pero no cambia
    – Danilo
    Commented el 12 ago. 2020 a las 22:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.