Why is this CSS arrow border not black?

Question

I have taken a tooltip from another Stack Overflow post, and slightly modified it. It looks like this:

Generated from the following code:

.up-arrow {
    display: inline-block;
    position: relative;
    border: 1px solid black;
    text-decoration: none;
    border-radius: 2px;
    padding: 20px;
    margin-top: 50px;
}
.up-arrow:before {
    content: '';
    display: block;  
    position: absolute;
    left: 140px;
    bottom: 100%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: black;
} 

.up-arrow:after {
    content: '';
    display: block;  
    position: absolute;
    left: 141px;
    bottom: 100%;
    width: 0;
    height: 0;
    border: 9px solid transparent;
    border-bottom-color: white;
}

<div href="#" class="up-arrow">Button with Up Arrow</div>

If you look very closely, you can see that the color of the :before element is not actually black, it is #77777.

This problem has left my coworkers and I stumped. It is consistent across browsers. Can anyone provide some insight?

Anti-aliasing smoothes the line to avoid "jaggies" (square pixels along the diagonal). This is definitely a feature, not a bug. — Blazemonger, Jan 11 '18 at 23:05
It outputs #808080 here in stack overflow's code snippets thingy on Chrome. I think you've found a proper ghost in the machine. — Iskandar Reza, Jan 11 '18 at 23:06
here is another post to get more ways to avoid this issue https://stackoverflow.com/questions/47956092/html-css-triangle-with-pseudo-elements/47956145#47956145 — Temani Afif, Jan 11 '18 at 23:09
If you color sample the corners of your box you'll also discover they're also anti-aliased and lighter than #000 — Greg Rozmarynowycz, Jan 11 '18 at 23:17

score 2 · Accepted Answer · edited Jan 11 '18 at 23:40

.up-arrow {
    display: inline-block;
    position: relative;
    border: 1px solid black;
    text-decoration: none;
    border-radius: 2px;
    padding: 20px;
    margin-top: 50px;
}
.up-arrow:before {
    content: '';
    display: block;  
    position: absolute;
    left: 140px;
    bottom: 100%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: black;
} 

.up-arrow:after {
    content: '';
    display: block;  
    position: absolute;
    left: 141px;
    top: -17px;
    bottom: 100%;
    width: 0;
    height: 0;
    border: 9px solid transparent;
    border-bottom-color: white;
}

<div href="#" class="up-arrow">Button with Up Arrow</div>

Your problem is antialiasing, which is trying to make your line look smooth. You can make it true black by moving the :after element 1 pixel or so further away from the diagonals, so that the line is thicker and antialiasing only affects the outside pixels not the inner pixels, but whether this is desirable is another question. It looks slightly odd.

Said effect is achieved in the snippet above by adding top: -17px to the :after element.

Why is this CSS arrow border not black?

1 Answers1