続・CSSだけでviewportに常に対角線を引く

画面に対角線をどうしても引きたい時が人生に一度や二度は来ると思う。

そして一旦 「できない」と言ったものがすぐさま他者によって「できる」と言われる時も人生に一度や二度は来る。

というわけで、できた。 デモはまたCodePenに置いた。

前エントリーではあれやこれやと能書きを垂れたけど、そんなのほとんど関係なく上記で実現できてしまった。

デモではbackground-sizeでの引き伸ばしではなく、fixedした要素にwidth: 100%height: 100%で見た目の表示領域(厳密にはviewportではないのでこう書く)に合わさるようにした。背景を画像にしているので見づらさはあるが、線のみが描画できているのがわかると思う。

Windowsではスクロールバーが出ていてもwidth: 100%によって表示領域分に角が来る。Mobile Safari 9でもブラウザUI以外の表示領域分に角が来た。さらにデスクトップ版Safariでは、強制再描画のハックがなくても対角線は保たれた。ウィンドウサイズの幅や高さが極端に小さくなると斜線が消えるとかいう面白現象も見られたが、それは見なかったことにした。

ながしまさんありがとうございました。


書いてみると、前回はなぜこれに気づかなかったのだろうという感じがする。頭が悪いからだと思う。つらい。