Actualmente muestro un texto en el extremo superior de una imagen: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> .container { position: relative; } .text-block { position: absolute; color: white; position: absolute; top: 0px; left: 0px; background-color:#17d90d; font-weight: bold; padding:5px; } <!-- language: lang-html --> <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> <!-- end snippet --> 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í][1]][1] [1]: https://i.sstatic.net/BceRw.png La idea es que el texto de la palabra oferta se muestre igual al de la foto. ¿Como se podría hacer?