The trick is to set an overlay with a gradient image in a pseudo element.
This overlay can be rotated to provide the sharp cutoff, and the parent overflow keeps it inside the rectangle
#test {
height: 390px;
width: 200px;
background-color: blue;
position: absolute;
overflow: hidden;
}
#test:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
-webkit-transform: rotate(-28deg) translateX(75%) translateY(-10%);
-moz-transform: rotate(-28deg) translateX(75%) translateY(-10%);
transform: rotate(-28deg) translateX(75%) translateY(-10%);
background-image: -ms-linear-gradient(240deg, rgba(250,250,250,0.85) 50%, transparent);
background-image: -moz-linear-gradient(240deg, rgba(250,250,250,0.85) 50%, transparent);
background-image: -webkit-linear-gradient(240deg, rgba(250,250,250,0.85) 50%, transparent);
background-image: linear-gradient(208deg, rgba(250,250,250,0.85) 50%, transparent);
}