Cutting image diagonally with CSS3

I want to cut away part of an image using CSS3. The part I want to cut away has a form of a triangle

To be more specific: if the above picture is the image I want to cut away the blue part of the image, not the yellow

The html I am thinking would be something like:

<figure>
 <img src="img_pulpit.jpg" alt="The Pulpit Rock">
</figure>