Beispiel:CSS3 transform-skew1.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0;" />
		<link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
		<title>transform:skew()</title>
		<style>
			nav {
				margin: 0 0 0 2em;
			}

			nav ul {
				list-style: none;
				margin: 1em 0;
				padding: 0;
			}

			nav ul li {
				width: 100px;
				display:inline-block;
			}

			nav ul a {
				display: block;
				margin: 0.5em 1em;
				text-decoration: none;
				background: lightgrey;
				border: 1px solid grey;
				margin: -0.5em -1em;
				padding: 0.5em 1em;
				-ms-transform: skewX(-30deg);
				-webkit-transform: skewX(-30deg);
				transform: skewX(-30deg);
			}

			ul a:hover {
				background: grey;
			}
		</style>
	</head>
	<body>
		<h1>Verwendung von <code>transform:skew()</code></h1>
		<main>
			<h2>angeschrägtes Menü aus Parallelogrammen</h2>
			<nav>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#1.html">Seite 1</a></li>
					<li><a href="#2.html">Seite 2</a></li>
					<li><a href="#2plus.html">Impressum</a></li>
					<li><a href="#3.html">Kontakt</a></li>
				</ul>
			</nav>
			<p>
				Die Elemente der Navigation werden zu Parallelogrammen
				verzerrt - leider aber auch die Schrift!
			</p>
		</main>
	</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS3_transform-skew1.html&oldid=43943“