CODEWITHSUNDEEP
csscross-browsergeometrycss-shapes
user3229090
user3229090

Reputation: 71

How to create a cross-browser CSS triangle?

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?

Upvotes: 7

Views: 3238

Answers (2)

Chester Militante
Chester Militante

Reputation: 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;
}

Upvotes: -1

michaelward82
michaelward82

Reputation: 4736

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;
}

Upvotes: 3

Related Questions