CODEWITHSUNDEEP
google-chromefirefoxcss
Ivin
Ivin

Reputation: 4845

CSS triangle issue in firefox

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;

}

enter image description here

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?

Upvotes: 4

Views: 3119

Answers (4)

Kos
Kos

Reputation: 21

Try add this into css:

 -moz-transform: scale(.9999);

Upvotes: 2

kiid
kiid

Reputation: 96

Setting 'inset' for the transparent borders helped for me. I found this trick here: http://css-tricks.com/snippets/css/css-triangle/#comment-103785

Upvotes: 1

Stuart Wakefield
Stuart Wakefield

Reputation: 6414

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).

Border right-angled triangle

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.

Upvotes: 4

Andrea Ligios
Andrea Ligios

Reputation: 50281

Try using RGB instead of transparent, 

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

.arrow-outer{
   border: 1em solid rgba(255,255,255,0);
   border-top-color: #3bb0d7;
   border-right-color: #3bb0d7;
   height: 0;
   width: 0;
}

as we did here: Weird dark border :after css arrow in Firefox

EDIT: by the way, it worsk in both ways in my Firefox (one with the gray line, the others without, but never the effect you described...)

Upvotes: 0

Related Questions