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>