Small gap despite same value for CSS offsets

Question

I'm trying to add a small cut off corner effect to headers. It works in principle, but at some font sizes there is a gap between the header and the corner. It's likely this is OS and browser dependent. I tried with Firefox 67.0.4 on macOS 10.14.5. With Safari the gap is visible at other font sizes. Using the zoom function of the browser works to change the behavior.

h1 {
    background: black;
    position: relative;
    margin-right: 0.6em;
    color: white;
}

h1::after {
    content: "\200b";
    position: absolute;
    border-left: 0.6em solid black;
    border-top: 0.9em solid transparent;
    top: 0;
    right: -0.6em;
    bottom: 0;
}

<h1>Header</h1>

It seems like the browser doesn't calculate the relevant values the same way. If I use 10px for the margin-right and the right value, then the gap is negative, which surprised me even more.

I'm open to other suggestions to achieve the same effect, as long as the cut off part is transparent, so it works on background images. Maybe there is a way to clip the corner with svg or a translated element? The corner should scale with the font size.

This answer was the best match for my use case: https://stackoverflow.com/a/33100842/3748142 — fschulze, Jun 23 '19 at 11:56

score 0 · Answer 1 · answered Jun 22 '19 at 08:49

You can use a linear-gradient from black to transparent, and get the point of transition with calc():

h1 {
    background: linear-gradient(45deg, black calc(100% - 0.6em), transparent calc(100% - 0.6em));
    position: relative;
    margin-right: 0.6em;
    color: white;
    
    
}

<h1>Header</h1>

Small gap despite same value for CSS offsets

1 Answers1