cssのtransformをうまく使って斜め線のレイアウトをしてみる │ Triple Threat(トリプルスレッド)

こんばんわ。たいそん(@ttaison)です。

最近胃の回復が追いつかなくなってきた30代のtaisonです。
そろそろ食生活を考えねばならぬ歳になってきたようです。
このままでは右肩下がりになってしまうのでそれだけは避けねば、、、

さて、今日は形だけでも右肩上がりに！cssアニメーションでおなじみのtransform :rotateを使って、背景を斜め線に区切るレイアウトに挑戦してみようと思います。

See the Pen ZKMEGL by taison (@takatsugusuzuki) on CodePen.

1. 意外と簡単に出来るcss斜め線レイアウト
2. divの外枠をcssで回転させて斜め線を演出する
3. transform: rotate 応用編
4. animationは色んな使い道がある

意外と簡単に出来るcss斜め線レイアウト

よくアニメーションでセクションの背景の区切りを波のような曲線にして、ウネウネ動かすレイアウトがあります。
あれはSVGパスを基点に動かすアニメーションなので、初心者にはなんだか難しそうに感じちゃいますよね。

今回は単純に形だけ斜めにできたらいいや。ってやつなので、cssアニメーションとdiv要素を使って簡単に実現したいと思います。

divの外枠をcssで回転させて斜め線を演出する

まず基本のレイアウト構成を決めます。


<div class="wrap">
	<div class="kaiten">
            <div class="kaitencontent">
		<h3>見出し</h3>
		<p>一体これで何を語ろうというのか・・・</p>
	    </div>
	</div>
</div>

このdiv.kaitenとdiv.kaitencontentにcssで回転をかけ、斜め線を作ります。
次に一番外枠のwrap要素で、wrapをはみ出す部分が隠れるようcssを設定します。


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

斜め線を作るときにdiv要素を回転させるのですが、上のコードはcssで回転させた時はみ出した部分をかき消す能力を持ってます。

はみ出す部分書き消す
padding-topは斜めコンテンツの位置調整の為に指定。

で、次に中にある枠要素を回転させます。


.kaiten{
   margin: 0 -50px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  background: #000;
  color: #fff;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
  box-shadow: 0px 2px 3px rgba(0,0,0,0.4) inset;
}
.kaitencontent{
  -webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
padding: 150px 100px 250px 100px;
  margin: 0 auto;
  text-align: center;
}
.kaitencontent h3{
  font-size: 60px;
  position: relative;
  margin-bottom: 20px;
}
.kaitencontent p{
  font-size: 18px;
}

まずkaitenをrotateの-5度(-5deg)で回転させ、さらに内部のkaitencontentに逆回転(5deg)を与えて文字を元の傾きに戻します。

ちなみにtransform-originは変化の起点を決める要素です。positionと同じような感じですね。
ブラウザ対応状況はこちらから→

paddingは肉付けで、div要素の枠に厚みを持たせるため指定。

これで斜め区切りの要素がcssだけで完成しちゃいました。
仕組みが分かればだいぶ簡単じゃないですか？

transform: rotate 応用編

さて、基本が出来たところで少し応用してみます。
今度は斜め線を2本引いて、kaiten部分が末広がりになるレイアウトを作ってみましょう。

完成すると記事冒頭にあったcodepenのレイアウトが実現できます。
末広がりってなんだか幸せになれそうでいい。

やり方は単純。さっき作った斜め線ブロックの下に同じdiv要素をもう一つ用意して、


<div class="wrap">
	<div class="kaiten">
            <div class="kaitencontent">
		<h3>見出し</h3>
		<p>一体これで何を語ろうというのか・・・</p>
	    </div>
	</div>
	<div class="kaiten">
            <div class="kaitencontent">
		<h3></h3>
		<p></p>
	    </div>
	</div>
</div>

二つ目のdiv要素に逆向きのrotateをあてるだけ。


.kaiten:nth-child(2){
   margin: 0 -50px;
  margin-top: -240px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  background: #fff;
  color: #000;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  transform: rotate(5deg);
  box-shadow: 0px 2px 3px rgba(0,0,0,0.4) inset;
}
.kaitencontent:nth-child(2){
  -webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
padding: 150px 100px 250px 100px;
  margin: 0 auto;
  text-align: center;
}

色は反転させて（別の色ならなんでもいいです）、上の要素と見分けがつくようcssで指定します。

あとは、各要素のpaddingやmarginの数値を調整して完成です！
どうですか？末広がりましたか？簡単ですね。