Il taglio in alto a dx l'ho visto: lo risolvi mettendo un'immagine alla destra (ad esempio come list-style-img - supponendo che le tue immagini siano elementi di una lista).

Il fill diagonale non riesco a vederlo.

Ma poi cosa rappresenta l'immagine? E` un elemento decorativo o porta informazione?
Nel primo caso va messa come sfondo, nel secondo va inserita tramite <img>, con sovrapposta la scritta. E` una cosa che si fa, e che i browser riescono a gestire senza problemi, se realizzata con le dovute cautele.