Question

I need to use CSS triangle to create and arrow. This is the one Im working on: http://jsfiddle.net/7vRca/

<div class="arrow-outer"></div>

.arrow-outer{
border: 1em solid transparent;
border-top-color: #3bb0d7;
border-right-color: #3bb0d7;
height: 0;
width: 0;

}

The issue is that in chrome it looks perfect. But in firefox there is a small bent in the middle.

Any idea why this is happening and how can I make it look smooth as in chrome?

Answer 1

I haven’t got a mac to test unfortunately and Firefox on Windows seems to render correctly. You could get around the problem though…

.arrow-outer {
  border: 2em solid transparent;
  border-right: 0;
  border-top-color: #3bb0d7;
  height: 0;
  width: 0;
}

Instead of rendering the triangle as two sides of the border, it flattens the right border to achieve the same shape using only the top border, circumventing any alignment issues (illustrated below).

It is possible that Firefox on Mac OS is rendering the div as a pixel height which might be solved using an overflow hidden, but it is equally if not more likely that the rounding in the rendering algorithm has resulted in different pixels being selected for the edge of the right border for that combination of browser and OS. That would be my guess as to why it is happening.