CSSで斜線を引く（offset-pathを使ったケース）

この記事にインスパイアされました。

グラデーションで描くことしか思いつかなかったので、この手法はいいな、と感じました。

なので、三角関数を使わずに、offset-pathで左上から右下までパスを書き、offset-rotate: autoで、そのパスの角度に回転させてしまおう、という発想で書いてみました。

.diagonal-box {
    container-type: size;
    position: absolute;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    pointer-events: none;

    &::before {
        content: "";
        display: block;
        position: absolute;
        width: max(200cqh, 200cqw);
        border-bottom: 1px solid #f00;
        offset-path: polygon(0% 0%, 100% 100%); /* これ */
        offset-anchor: top left; /* これ */
    }
}

See the Pen Diagonal line by lhankor_mhy (@lhankor_mhy) on CodePen.

ただ、Chrome において、とある reset CSS を使うと、なぜかリサイズに追従しなくなるのが気になっています。何が原因なんだろ……？

---

調べてみたところ、Chrome のバグっぽいです。かなり限定された状況でしか再現しませんでした。