How to create a cross-browser CSS triangle?

Question

That's a standard CSS for a CSS triangle:

display: inline-block;
vertical-align: middle;
content: " ";
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-top: 6px solid black;
width: 0;
height: 0;

http://jsfiddle.net/d6w2e/

It works well, but it renders with pixelated edges in Firefox under OSX.

Luckily there's an easy for Firefox! So let's just apply border-style:

border-style: solid dotted none;

So far so good, the problem is when you set border-style it TOTALLY breaks (renders a rectangle) in IE10+ (but works in IE8, which is crazy!):

enter image description here

Here's a blog post on it (try opening it in IE11, although you have screen above):

http://blog.dustinboersma.com/post/45768836072/fixing-osx-firefox-border-triangle-pixelation

Any ideas how to make in work in Firefox AND IE10?

try to add specific browser classes and style it like: .gecko .arrow-down {border-style: solid dotted none;} — Vel
– Vel, Commented May 22, 2014 at 8:02
could you clarify witch browsers by listing the ones you are targetting. — web-tiki
– web-tiki, Commented May 22, 2014 at 8:24
If any of the answers are acceptable, please consider choosing one and marking it as the accepted answer. — michaelward82
– michaelward82, Commented Jun 4, 2014 at 10:58

michaelward82 · Accepted Answer · 2014-05-22 08:13:42Z

3

Use double instead of dotted.

See http://jsfiddle.net/d6w2e/4/

I'm not aware of the precise reason why dotted doesn't work for IE10+, but it is probably to do with the way the line needs to be calculated because of the gaps.

We must remember that the CSS triangle is a useful but hacky and unintended way of exploiting the way web browsers intersect borders.

.arrow-down {
  position: absolute;
  top: 22px;
  left: 10px;
  display: inline-block;
  vertical-align: middle;
  content: " ";
  border-right: 32px double transparent;
  border-left: 32px double transparent;
  border-top: 48px solid black;
  width: 0;
  height: 0;
}

edited May 22, 2014 at 8:13

answered May 22, 2014 at 8:02

michaelward82

4,74628 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chester Militante · Accepted Answer · 2015-05-08 07:27:49Z

-1

Keep border-style: solid, then add -moz-border-start-style: dotted; so that on Firefox it renders smoothly.

Here's a demo

CSS:

.arrow-down { 
  width: 0; 
  height: 0; 
  border-width: 20px 20px 0;
  border-style: solid;
  -moz-border-start-style: dotted;
  border-color: #f00 transparent;
}

edited May 8, 2015 at 7:27

answered May 7, 2015 at 20:28

Chester Militante

11 bronze badge

Collectives™ on Stack Overflow

How to create a cross-browser CSS triangle?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related