diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 10 |
1 files changed, 6 insertions, 4 deletions
@@ -5,14 +5,14 @@ <title>Diagonal Scroll</title> <style> div { - left: -500px; + left: -500px; /* The div is shifted to the left so the left side of the p elements don't get clipped */ top: 0px; - position: fixed; + position: fixed; /* Make the div fill the entire screen */ width: 1000px; height: 100vh; - overflow: scroll; + overflow: scroll; /* This adds the diagonal scroll bar */ transform-origin: top left; - transform: skewX(45deg); + transform: skewX(45deg); /* I originally used a rotate transform, but the math is way easier when using skewX */ font-family: DejaVu Sans, Noto Sans, Sans-Serif; } p { @@ -23,6 +23,8 @@ transform: skewX(-45deg); } span { + /* This adds a block of empty space at the bottom of the div */ + /* Otherwise, if the screen is taller than its width, the text at the bottom will be to the right of the screen's right edge */ display: inline-block; height: calc(100vh - 100vw + 400px); transform-origin: top left; |