SVGファイルを使って、背景を波型や斜めにする方法

Advertisements

Webデザインでちょっとしたアクセントをつけたいときなど、
例えばキービジュアルとかで使えそうな
svgファイルを使って拡大しても荒れない方法を調べたので、
備忘録もかねてメモします。

  1. SVG画像を用意
  2. 疑似要素として、画像の上に重ねる
  3. 斜めに切り抜きたい場合
  4. 切り抜きに便利なサイト

1 SVG画像を用意

今回は「Custom Shape Dividers」のサービスを使用

まず最初に、何でも良いけれど、illustratorとかAdobe XDなどを使い、
型抜きに使いたいパス画像を作ったら、svg形式で書き出します。

今回は、Custom Shape Dividersのsvgファイルを使用しました。

Illustratorで作ったデータの場合、
.svgのファイルを開いて、<svg>タグの中にpreserveAspectRatio=”none”を追加してあげると、
画像のアスペクト比を変更できるようになるので、入れておくと扱いやすいです。

Advertisements

2 疑似要素として、画像の上に重ねる

HTMLに直接svgを記述するやり方もある(その方がCSSでの変更も簡単そう?)けれど、
あまりHTMLの方をごちゃごちゃさせたくなかったので、
今回は、CSSにsvgの外部ファイルを読み込んで表示させる方法を選択しました。


<section class="wave">
<h2>Contents</h2>
</section>

.wave {
	background: url("../img1.jpg") no-repeat center;
	background-size: cover;
	height: 500px;
	position: relative;
	display: flex;
	/*contentsをcenterに*/
	justify-content: center;
	align-items: center;
	font-size: 3.0rem;
	font-weight: 600;
	color: #FDFCDC;
}

.wave::after {
	background: url("../wavesNegative.svg");
	bottom: 0;
	content: '';
	height: 150px;
	position: absolute;
	width: 100%;
}

考え方として、下記のようにsvgファイルを背景画像の位置に合わせて重ねています。

  1. 切り抜きたい背景画像をposition:relativeに指定して、基準の位置に。
  2. その疑似要素(::after)に、background:でSVG画像を読み込み。
  3. 疑似要素をposition:absoluteとして、bottom:0の位置で2つがぴったり重なるように指定。
Advertisements

3 斜めに切り抜きたい場合

三角形の形のsvg画像を用意して、::beforeと::afterにそれぞれ同じ三角形のsvgを、上下で180度回転して配置しています。


<section class="tilt">
<h2>Contents</h2>
</section>

.tilt {
	background: url("../img1.jpg") no-repeat center;
	background-size: cover;
	height: 500px;
	position: relative;
	display: flex;
	/*contentsをcenterに*/
	justify-content: center;
	align-items: center;
	font-size: 3.0rem;
	font-weight: 600;
	color: #FDFCDC;
}

.tilt::before,.tilt::after {
	background: url("../tilt.svg") no-repeat center;
	content: '';
	height: 50px;
	position: absolute;
	width: 100%;

}

.tilt::before {
	top:0;
	transform: rotate(180deg);
}

.tilt::after {
	bottom: 0;
}

4 切り抜きに便利なサイト

背景画像を切り抜いて使う際に、
良さそうなジェネレーターがあったのでいくつかご紹介します。

今回、こちらの波型のsvgファイルをダウンロードして使用しました。

「Custom Shape Dividers」と似たサービス。さらに使い方がシンプルそうです。

svgを使わなくてもできる簡単な模様の場合、これも使えそうです。

SVGのその他記事はこちら

Advertisements

Similar Posts