[CSS]ちょっと大胆に、斜めのラインを使うスタイルシートのチュートリアル

サイト構築 -CSS

Post on:2011年12月26日

sponsorsr

コンテンツ間の区切りやエレメントに斜めのラインを使ったスタイルを与えるスタイルシートのチュートリアルを紹介します。

Slopy Elements with CSS3

[ad#ad-2]

下記は各ポイントを意訳したものです。

デモ
実装

デモ

斜めのラインはCSS3で実装されているので、Chrome, Safari, Firefox, IE9でご覧ください。

demo 1

エレメント間のセパレートを対角線状にしたデモです。
見出しの両端も斜めにデザインされています。

demo 2

隣接したエレメントのセパレートを交互の矢印状にしたデモです。
見出しの斜めのカット、背景のように斜めに配置されたテキストもスタイリッシュです。

[ad#ad-2]

実装

実装方法は、デモごとに紹介します。

demo 1

実装のポイント

コンテンツ自身は回転させず、コンテンツのラッパーを回転させます。
回転させたコンテンツは表示領域からはみ出す部分もあるので、余剰分の処理も忘れずに。

HTML

見出しとテキストを含む個々のコンテンツはarticle要素で実装し、そのラッパーとしてdiv要素を設置しclassに「se-slope」を与えます。

<section class="se-container">
	<div class="se-slope">
		<article class="se-content">
			<h3>Some headline</h3>
			<p>Some text</p>
		</article>
	</div>
	<div class="se-slope">
		<!-- ... -->
	</div>
	<!-- ... -->
</section>

CSS

まずは、ページの背景となるピンクを設定します。

body{
	background: #e90089;
}

回転表示した際に余剰分が隠れるにします。

.se-container{
	display: block;
	width: 100%;
	overflow: hidden;
	padding-top: 150px;
}

各コンテンツのセパレートを対角線状にするために、ラッパー（.se-slope）を回転させます。ここでは5度回転させ、それを交互にプラスとマイナスにします。
また、回転させた際には配置の調整も必要です。マイナスマージンで吊り上げて配置します。

.se-slope{
	margin: 0 -50px;
	transform-origin: left center;
}
.se-slope:nth-child(odd){
	background: #000;
	transform: rotate(5deg);
	margin-top: -200px;
	box-shadow: 0px -1px 3px rgba(0,0,0,0.4);
}
.se-slope:nth-child(even){
	background: #e90089;
	transform: rotate(-5deg);
	box-shadow: 0px 2px 3px rgba(0,0,0,0.4) inset;
}

見出しの両端に三角の矢印を擬似要素で作成します。

.se-content h3{
	font-size: 60px;
	position: relative;
	display: inline-block;
	padding: 10px 30px 8px 30px;
	height: 80px;
	line-height: 80px;
	margin-bottom: 20px;
	font-family: 'Bitter', 'Trebuchet MS', Arial;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
}
.se-slope:nth-child(odd) .se-content h3{
	background: #e90089;
	color: #000;
}
.se-slope:nth-child(even) .se-content h3{
	background: #000;
	color: #e90089;
}
.se-content h3:before{
	content: '';
	width: 0;
	height: 0;
	border-top: 38px solid transparent;
	border-bottom: 60px solid transparent;
	border-right: 60px solid black;
	position: absolute;
	left: -59px;
	top: 0px;
}
.se-content h3:after{
	content: '';
	width: 0;
	height: 0;
	border-top: 38px solid transparent;
	border-bottom: 60px solid transparent;
	border-left: 60px solid black;
	position: absolute;
	right: -59px;
	top: 0px;
}

demo 2

実装のポイント

矢印の形状を交互に組み合わせるには、透明なボーダーと擬似要素を使用します。

HTML

HTMLは最初のデモとほとんど同じで、classの付け方がちょっと違うだけです。

<section class="se-container">
	<div class="se-slope sl-slope-black">
		<article class="se-content">
			<h3>Some headline</h3>
			<p>Some text</p>
		</article>
	</div>
	<div class="se-slope sl-slope-pink">
		<!-- ... -->
	</div>
	<!-- ... -->
</section>

CSS

背景をピンクにセットし、回転表示した際に余剰分が隠れるにします。

body{
	background: #e90089
}
.se-container{
	display: block;
	width: 100%;
	overflow: hidden;
	box-shadow: 0px 0px 10px #000;
}

個々のコンテンツを50%の幅にし、float:left;で二列に配置します。背景色は交互になるように、ピンクとブラックを指定します。

.se-slope{
	width: 50%;
	height: 300px;
	position: relative;
	float: left;
	overflow: hidden;
}
.se-slope .se-content{
	margin: 50px 100px 0px 100px;
}
.se-slope-black{
	background: #000;
}
.se-slope-pink{
	background: #e90089;
}

ブラックのコンテンツに:after擬似要素を使用して、矢印の形状を与えます。偶数番目には左の矢印、奇数番目には右の矢印、になるようにします。

.se-slope-black:nth-child(odd):after,
.se-slope-black:nth-child(even):after{
	content: '';
	position: absolute;
	bottom: 0px;
	width: 0px;
	height: 0px;
	border-top: 150px solid transparent;
	border-bottom: 150px solid transparent;
}
.se-slope-black:nth-child(odd):after{
	border-right: 60px solid #e90089;
	right: 0px;
}
.se-slope-black:nth-child(even):after{
	border-left: 60px solid #e90089;
	left: 0px;
}

擬似要素を使って、見出しの両端を斜めにカットします。

.se-slope.se-slope-black h3:after,
.se-slope.se-slope-black h3:before,
.se-slope.se-slope-pink h3:after,
.se-slope.se-slope-pink h3:before{
	content: '';
	width: 0px;
	height: 0px;
	top: 0px;
	position: absolute;
}
.se-slope.se-slope-black h3:after{
	border-top: 70px solid transparent;
	border-left: 30px solid #e90089;
	right: -30px;
}
.se-slope.se-slope-black h3:before{
	border-bottom: 70px solid transparent;
	border-right: 30px solid #e90089;
	left: -30px;
}
.se-slope.se-slope-pink h3:after{
	border-top: 70px solid transparent;
	border-right: 30px solid #000;
	left: -30px;
}
.se-slope.se-slope-pink h3:before{
	border-bottom: 70px solid transparent;
	border-left: 30px solid #000;
	right: -30px;
}

テキストは装飾用のエレメントとして斜めに配置し、サイズを大きくして半透明にします。

.se-content p{
	position: absolute;
	z-index: 9;
	opacity: 0.3;
	font-size: 50px;
	text-align: left;
	transform-origin: top center;
}
.se-slope:nth-child(even) .se-content p{
	transform: rotate(-15deg);
	top: -100px;
	right: -50px;
	text-align: left;
	width: 95%;
}
.se-slope:nth-child(odd) .se-content p{
	transform: rotate(15deg);
	top: -100px;
	left: -50px;
	text-align: right;
	width: 90%;
}
.se-slope.sl-slope-pink .se-content p{
	color: #000;
}