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?