続・CSSだけでviewportに常に対角線を引く
- 公開日
- タグ
- CSS
画面に対角線をどうしても引きたい時が人生に一度や二度は来ると思う。
そして一旦「できない」と言ったものがすぐさま他者によって「できる」と言われる時も人生に一度や二度は来る。
対角線に線引くの、linear-gradient(to left bottom, ...)とbackground-sizeで良い気がする
— ながしまきょう2016年5月8日
引き延ばせば勝手に角度変わる
というわけで、できた。
See the Pen Pure CSS Diagonal Line by oti (@otiext) on CodePen.
前エントリーではあれやこれやと能書きを垂れたけど、そんなのほとんど関係なく上記で実現できてしまった。
デモでは background-size での引き伸ばしではなく、fixed した要素に width: 100% と height: 100% で見た目の表示領域（厳密には viewport ではないのでこう書く）に合わせている。背景を画像にしているので見づらさはあるが、線のみが描画できているのがわかると思う。
Windows ではスクロールバーが出ていても width: 100% によって表示領域分に角が来る。Mobile Safari 9 でもブラウザ UI 以外の表示領域分に角が来た。さらにデスクトップ版 Safari では、強制再描画のハックがなくても対角線は保たれた。ウィンドウサイズの幅や高さが極端に小さくなると斜線が消えるとかいう面白現象も見られたが、それは見なかったことにした。
ながしまさんありがとうございました。
書いてみると、前回はなぜこれに気づかなかったのだろうという感じがする。頭が悪いからだと思う。つらい。