Why does CSS rotation cause a line to appear down the height of this triangle?

Question

I created a triangle with this css:

.arrow-left {
width: 0px;
height: 0px;
border-top: 200px solid transparent;
border-bottom: 200px solid transparent;
position: relative;
left: -7px;
top: -32px;
z-index: 1;
border-right: 200px solid #CC888A;
}

But when I added the transform to it:

.arrow-left {
width: 0px;
height: 0px;
border-top: 200px solid transparent;
border-bottom: 200px solid transparent;
transform: rotate(45deg);
position: relative;
left: -7px;
top: -32px;
z-index: 1;
border-right: 200px solid #CC888A;
}

a strange dotted line appears down the center of the triangle. It appears fine in Chrome, I know Firefox shows it though.

Here's the example: http://codepen.io/aaronlbrink/pen/zLFEJ

UPDATE This works: http://codepen.io/aaronlbrink/pen/qHbCG

Answer 1

You can try without css3 rotate function :

width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 200px 200px;
border-color: transparent transparent #007bff transparent;

More on : http://apps.eky.hk/css-triangle-generator/