CSS custom shape

Question

How can I make something like this:

By now I have: jsfiddle.net/xmqfe3h0/9

#test {
width: 315px;
height: 90%;
position: relative;
}

#test:before {
content: "";
position: absolute;
left: 70%;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 50px solid black;   
}

Answer 1

add skew to your css3 shape :

  -webkit-transform: skew(40deg);
  -moz-transform: skew(40deg);
  -o-transform: skew(40deg);

JSFIDDLE DEMO