How do you make this dogeared shape with css only

Question

Can anyone show me (and explain) how to create this image with CSS only and with 1 shape (50x50px)a square with a transparent "dogear" on the bottom right?

I've been playing with triangles and circles with borders, but this has extra sides which I can't figure out on my own how to build. Thanks.

Answer 1

How about using gradients?

div{
  width: 50px;
  height: 50px;    
  background:
   linear-gradient(135deg, #333 0%, #333 90%, transparent 90%, transparent 100%);
}

http://jsfiddle.net/dCc7G/