WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

要素を傾けて斜めにする

f:id:mmmmofu:20170411134602p:plain

デモ

http://efu.sakura.ne.jp/web/skew/

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>傾き</title>
	<style>
		h1 {
			text-align: center;
			line-height: 500px;
			font-weight: bold;
			letter-spacing: 0.05em;
			font-size: 50px;
			font-family: "游ゴシック",YuGothic,"Helvetica","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Arial, sans-serif;
		}
		.header {
			position: relative;
			height: 200px;
			background: #FFF;
			z-index: 1;
		}
		.section--1 {
			height: 500px;
			margin-top: -100px;
			-webkit-transform: skewY(-4deg);
			-moz-transform: skewY(-4deg);
			-ms-transform: skewY(-4deg);
			transform: skewY(-4deg);
			background: yellowgreen;
		}
		.section--2 {
			height: 500px;
		}
		.section--3 {
			height: 500px;
			-webkit-transform: skewY(4deg);
			-moz-transform: skewY(4deg);
			-ms-transform: skewY(4deg);
			transform: skewY(4deg);
			background: gold;
			background-size: cover;
			background-attachment: fixed;
		}
		.footer {
			position: relative;
			height: 200px;
			margin-top: -100px;
			background: #FFF;
		}
	</style>
</head>
<body>
	<header class="header"></header>
	<div class="section--1">
	</div>
	<div class="section--2">
		<h1>傾き</h1>
	</div>
	<div class="section--3">
	</div>
	<footer class="footer"></footer>
</body>
</html>