Question

我正在尝试为页眉添加一个小的截止角效果。原则上可以使用，但是在某些字体大小下，页眉和角之间存在间隙。这可能与操作系统和浏览器有关。我在macOS 10.14.5上尝试使用Firefox 67.0.4。使用Safari时，其他字体大小下的间隙可见。使用浏览器的缩放功能可以更改行为。

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>

似乎浏览器不会以相同的方式计算相关值。如果我将10px和margin-right的值使用right，则差距为负，这让我更加惊讶。

只要截止部分是透明的，我愿意接受其他建议以达到相同的效果，因此它适用于背景图像。也许有一种方法可以用svg或翻译后的元素剪裁？角应与字体大小成比例。

Answer 1

您可以使用从黑色到透明的线性渐变，并使用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>

尽管CSS偏移值相同，但差距很小

1 个答案: