CSS Smoothing Patterns in Firefox

Question

In Firefox, a triangle has jagged / flattened edges, regardless of whether it rotated or not.

See the script :

CSS (html just <div></div>)

div {
    border-top: 10px solid rgba(255, 255, 255, 0);
    border-right: 70px solid #777;
    border-bottom: 10px solid rgba(255, 255, 255, 0);
    transform: rotate(90deg);
}

For shapes that fill their field, you can apply outline: 1px solid transparent.

For non-rotated shapes, you can simply apply transform: scale(.999)(found in SO ).

But if I change the last line of CSS to transform: rotate(90deg) scale(.999), smoothing will happen anyway.

This error , filed in 12 and still marked as “new,” is somewhat related, and no attempt to resolve has been made.

- , Firefox? .

Answer 1

border-style border-right outset Firefox 32.0.3, height: 0; width: 0;, .

div {
  height: 0;
  width: 0;      
  border-top: 10px solid rgba(255, 255, 255, 0);
  border-right: 70px outset #777;
  border-bottom: 10px solid rgba(255, 255, 255, 0);
  transform: rotate(90deg);
  margin:40px;
}

<div></div>

Hide result

, -:

http://apps.eky.hk/css-triangle-generator/

div {
  width: 0;
  height: 0;
  border-style: inset;
  border-width: 70px 10px 0 10px;
  border-color: #777777 transparent transparent transparent;
}

<div></div>

Hide result

Answer 2

JS Fiddle

border:dotted, width:0 height:0 1px

div {
    width: 0;
    height: 0;
    border-style: dotted solid dotted solid;
    border-color: transparent transparent transparent #777777;
    border-width: 10px 0 10px 70px;
    transform: rotate(-90deg);
    margin:40px;
}

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

Answer 3

Firefox works better, but Chrome is a bit jagged. If the width and height are equal, you can easily control the triangle with transformations:

div {
    width:100px;
    height:100px;
    margin:0 auto;    
    background: linear-gradient(-45deg, #777 50%, #fff 50%);
    transform: translate(0,100px) rotate(-135deg) skew(35deg,35deg);
}