【CSS】疑似クラス、::afterと::beforeで斜めの背景を解説!!

シュウ

今回は【CSS】::afterと::beforeで斜めの背景の解説になります！

こんな方に読んでほしい

CSSを学び始めた方へ
CSS 疑似クラスについて学びたい方へ
今回は::afterと::before(斜め背景)について解説しております。

[記事の内容]

斜めの背景について

今回は、背景を斜めにする解説になります。
以前、transformを使い、背景色を回転させ斜めの背景を実装しましたが、
今回は、::beforeを使って斜めの背景を実装します。

背景色を2分割について

最初に背景色を2分割にします、親要素には必ずposition: relativeを指定します。
また、はみ出た部分を非表示にする為、overflow: hiddenを必ず指定しましょう。
デモサイトはコチラか
基本構造の書き方は以下のようになります。

背景色を2分割

<div class="animate">
	<div class="img">
		<img src="thumbnail.jpg" alt=""/> 
	</div>
</div>

.animate {
	position: relative;
	background: #cccccc;
	padding: 100px 0;
	text-align: center;
	overflow: hidden;
}	

.animate:before {
	content: "";
	background: #39546a;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 400px;
	display: block;
}

/*--画像は調整--*/
.animate img {
	width: 80%;
	margin: 0 auto;
	position: relative;
	z-index: 10;
}	

.animate img img {
	width: 100%;
}

背景色の斜めについて

背景色を斜めにするには、transform: skewY(〇〇deg)を指定します。
Y方向にdeg(角度)を指定します。
デモサイトはコチラか
基本構造の書き方は以下のようになります。

背景色を斜め

<div class="animate">
	<div class="img">
		<img src="thumbnail.jpg" alt=""/> 
	</div>
</div>

.animate {
	position: relative;
	background: #cccccc;
	padding: 100px 0;
	text-align: center;
	overflow: hidden;
}	

.animate:before {
	content: "";
	background: #39546a;
	position: absolute;
	left: 0;
	right: 0;
	
	/*--変更箇所--*/
	bottom: -260px;
	height: 600px;
	display: block;
	transform: skewY(20deg);
}

/*--以下省略 上記と同じ--*/
.animate img {}	
.animate img img {}

transform: skewY(20deg)の数値を変更することで様々な角度に変更ができます。
必ず、親要素にはposition: relative、overflow: hiddenを指定しておきましょう。

transform	【CSS】transformの使い方、要素を2Dに変形する!
transform-origin	【CSS】transform-originの使い方、中心点(位置)を指定する！