css

CSS experiments

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
<!DOCTYPE html>
<html lang="en">>
	<head>
		<meta charset="utf-8">
		<title>CSS Abuse</title>
		<style>
			div {
				left: -500px;
				top: 0px;
				position: fixed;
				width: 1000px;
				height: 100vh;
				overflow: scroll;
				transform-origin: top left;
				transform: skewX(45deg);
				font-family: DejaVu Sans, Noto Sans, Sans-Serif;
			}
			p {
				margin-left: auto;
				margin-right: 0;
				width: 500px;
				transform-origin: top left;
				transform: skewX(-45deg);
			}
			span {
				display: inline-block;
				height: calc(100vh - 100vw + 400px);
				transform-origin: top left;
				transform: skewX(-45deg);
			}
		</style>
	</head>
	<body>
		<div>
			<p>Oh, great. Another doe-eyed rebellious anime girl to add to the endless parade of generics that litter the media landscape. Ennui, huh? Well, isn't that just perfect.</p>
			<p>Ennui had a seething hatred for modern society, because honestly, who doesn't? She despised the endless monotonicity, er, I meant monotony, of her life and the only emotion she could feel nowadays was boredom. Endless, dull, tedious boredom!</p>
			<p>One day, Ennui had the brilliant idea of running away from home and going for a joyride on the Trans-Siberian Railway. Because, you know, nothing screams excitement quite like sitting in a cramped, musty train for days on end.</p>
			<p>After breaking multiple countries' multiple laws, the first five seconds aboard the train were a flurry of excitement, but boredom returned as quickly as it had departed. Suddenly, out of the corner of her eye, Ennui noticed a visibly troubled young man with an exceptionally bad haircut. Since she had nothing better to do, Ennui roasted his hairstyle, but the man took it as a compliment, and they struck up a slightly less boring conversation.</p>
			<p>He introduced himself as <a href="https://web.archive.org/web/20230526184241/https://en.wikipedia.org/wiki/Benjamin_Qi">Ben Qi</a>, a three-time International Olympiad in Informatics winner, as if anyone cares. Yeah, I'm sure Ennui was just thrilled to have met such an exciting and charming individual.</p>
			<p>But wait, it gets even better! Ennui nosily asked Ben Qi what was bothering him, because that's totally a question you ask a stranger you just met 30 seconds ago. Ben Qi just replied cryptically, &quot;I have a secret. A deep, dark, beleaguering secret gnawing away at my soul. And I'll tell you what it is, if and only if, you become an IOI winner like me.&quot;</p>
			<p>So, because Ennui was so utterly bored with life, she immersed herself into IOI training, living and breathing Dijkstra's algorithm, AVX2-accelerated segment trees, and the Knuth-Yao DP speedup. Robert Tarjan soon started haunting her dreams.</p>
			<p>And then, surprise surprise, she actually won the IOI! Because, you know, that's totally realistic.</p>
			<p>Long at last, the moment had come. Ben Qi smiled proudly and said, &quot;Congrats Ennui! You're now an IOI winner! And now I must fulfill my side of the biconditional. I'm going to reveal to you my secret.&quot;</p>
			<p>Ennui leaned forward eagerly, her heart pounding with anticipation. Finally! She had waited so long, sacrificed so much, suffered through so many Robert Tarjan nightmares! Finally!</p>
			<p>Ben Qi took a deep breath and ponderously whispered in a hushed tone&mdash;Oh wait, I must interrupt! You see, dear reader, I cannot reveal to you what Ben Qi's secret is. Why, you ask? Well, simply put, unlike Ennui, you are not an IOI winner.</p>
			<span></span>
		</div>
	</body>
</html>