CODEWITHSUNDEEP
cssfirefoxgeometry
Wordpressor
Wordpressor

Reputation: 7543

Firefox CSS3 isosceles triangle rendering issues

I'm trying to create a isosceles triangle using CSS3 and looks like Firefox can't render them properly?

Is there a way of fixing that?

Here's an example:

http://jsfiddle.net/WajLY/1/

CSS: 

.arrow {
  vertical-align: middle;
  content: "";
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  border-top: 75px solid #222;
  width: 0;
  height: 0;
}

HTML:

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

enter image description here

(Firefox renders the one on the left)

Upvotes: 6

Views: 1649

Answers (1)

F. M&#252;ller
F. M&#252;ller

Reputation: 4062

Seems like firefox still has problems with the jagged lines.

Workaround:
I came accross this workaround: Example maybe it helps you out - no guarantee.

Alternative I:
Make all borders the same size (in your example e.g. 50px) then you will not see the jagged lines. You can scale the size of the arrow with the border-size.

Alternative II:
Use an image (should not be a huge request / load time ...)

EDIT:

Got it work!: jsfiddle
The trick was to add this line of code: border-style: solid dotted none;

EDIT 2020:
The hacky workaround is not needed anymore. Updated fiddle.

Upvotes: 11

Related Questions