Slanted box in CHROME

Question

Bevelled edge looks bad in Chrome. In Firefox is ok. Why?

http://codepen.io/anon/pen/EaxJKv

.rr-left:after {
    bottom: 0;
    border-top: 30px solid #2c3e50;
    border-right: 1050px solid #FFFFFF;
}

Answer 1

Try changing the border top to RGBA(44, 62, 80, 0). This smooths the line a fair bit:

border-top: 30px solid rgba(44, 62, 80, 0);

http://jsfiddle.net/wmvq5uz1/