CSSとSVGを使った三角形背景の作り方

CSSの▼(下三角形)背景の対応方法

コーディングをしている時に、三角形で切り抜かれた背景が指定される時があります。
固定幅だったらそんなに深く考えなくてもいいんですが、レスポンシブ対応でのこの背景って結構やっかいですよねぇ。

よくあるやり方が疑似要素をつかったborderで作る三角形。

CSSの疑似要素 + borderで作る三角背景

画像を使わずに設置できるので「条件が合えば」手軽で便利なやり方です。
条件が合えばね。

使用サンプルはこんな感じになります。

CSSの疑似要素とborderを使った三角背景のサンプル。
サイズの調整や三角の大きさなどをCSSで調整できるメリットがある。

borderで作る三角形背景のCSS

割とスタンダードなやり方なので、ググれば色々出てくると思いますが、一応のせておきます。
細かい数値は要調整の場合があります。

.sample2{
	position: relative;
	background: #333;
	margin-bottom: 120px;
	padding: 2px 0;
}
.sample2::after {
	content: "";
	position: absolute;
	bottom: -100px;
	width: 0;
	height: 0;
	box-sizing: border-box;
	border-right: 50vw solid transparent;
	border-left: 50vw solid transparent;
	border-top: 100px solid #333;
	left: 0%;
}

borderで作る三角形の
メリット・デメリット

メリット: CSSのみで対応可能; 色変更もCSSで可能; 大きさもCSSで変更可能

デメリット: %指定ができない(vw or px); 1カラム以外使いずらい; 合計100vwにするとはみ出る; 背景がつけられない

横幅が100%で背景画像を使ってない時には使える

CSSの疑似要素とborderで作る三角背景のネックは、ボーダーの大きさの指定に「%(パーセント)」が使えないという点です。

%(パーセント)が使えない代わりに「VW」を使ってレスポンシブ対応するわけなんですが、VWは親要素に対してではなく、ビューポートに対しての大きさ指定になります。

そのため、このページのように、2カラム構成の背景に使うと非常に都合が悪いのです。

カラムの大きさは%(パーセント)で指定しているため、ビューポートの大きさ、簡単に言うとウィンドウサイズが変わると中心がズレます。

1カラム、100%の大きさで使用する際には大きな問題はないので、そういった意味で条件が合えば、と添えました。

あとVWの場合、スクロールバーも含んだサイズになるので、親要素にはみ出した分を打ち消す、overflow:hiddenもほぼ必須です。

背景画像が指定できない

疑似要素とborderで作る三角背景のもうひとつのデメリットが、背景を指定できないという点にあります。

ボーダーだからbackgroundを指定できないわけですね。

CSSの疑似要素とborderを使った三角背景のサンプル。
背景の指定ができないので、背景画像のある個所に使うと違和感がある。

違和感がでない程度であれば、いいかもしれませんが、ちょっとねぇ。
というわけで代替案を考えました。

三角形2個作って、角度変えるやつでもいいんですが、めんどくさかったのでSVG背景を使ってみました。

SVG画像を背景にして解決する方法

SVG画像をは、ベクターデータで作られており、テキストエディタで開くと文字情報として編集できます。

透過もできる（透過というかパスがない状態）にもできるので、これを使えば簡単に解決できるのでは？と。

SVG画像を疑似要素に使った三角背景のサンプル。
背景画像でも問題なく利用可能で、レスポンシブ対応もバッチリ！

SVG背景で作る三角形の
メリット・デメリット

メリット: ほぼCSSのみで対応可能; 色変更もCSSで可能; 大きさもCSSで変更可能; 背景もちゃんと表示される; %で大きさ指定可能

デメリット: SVG画像の準備が必要; URLエンコードの必要がある

デメリットと書いてますが、ほとんどデメリットないです。(※個人の感想です)

SVG背景の仕様確認

サンプルで使っているSVG画像をわかりやすく、背景に色を付けたものがこちら。

白く色のついたSVG画像を用意して、三角形にくりぬいている状態にしています。

色のついてないくりぬかれた部分が表示されて、白の個所はベースの背景色に合わせることで、三角形の背景を実現しています。

背景が白じゃないときめんどくさくない？

SVG画像の背景色を、ベースの背景色に合わせないといけないんじゃ汎用性に欠けてめんどくさくないですか？
と、思いますよね。

SVGはCSSから塗りの色を変更できるので、画像をいじらなくても色を変更できます！

ちょっとだけ、使い方に癖があるのですが、慣れれば全然問題ありません。

SVG背景の使い方

背景に使いたいSVG画像を用意します。
作ったSVGファイルをテキストエディタで開きます。

サンプルで使っているSVGをテキストエディタで開くとこんな感じです。

<?xml version="1.0" encoding="UTF-8"?><svg id="r2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 150"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="r1"><polygon class="cls-1" points="0 0 1200 0 1200 150 600 0 0 150 0 0"/></g></svg>

SVGのテキストを全部コピーして、以下のサイトにコピペしてください。
CSSで扱えるSVGのCSSのコードに変換してくれます。
※外部サイトです。

SVG URLエンコード

SVG画像をCSSで扱うにはURLエンコードが必要なんですが、それをやってくれるエンコーダーです。
しかも、CSS用のコードも生成してくれる優れモノ。

SVG背景を使ったCSSのコード

実際に使っているHTMLとCSSコードのサンプルを提示します！

▼まずはHTML

<div class="sample1">
	<p>SVG画像を疑似要素に使った三角背景のサンプル。<br>
		背景画像でも問題なく利用可能で、レスポンシブ対応もバッチリ！</p>
</div>

▼CSSはこちら

.sample1 {
    position: relative;
    background: url(背景画像のパス);
    min-height: 180px;
}

.sample1::after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 100%;
    width: 100%;
    background-image: url(data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='r2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 150'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cg id='r1'%3E%3Cg%3E%3Cpolygon class='cls-1' points='0 150 600.5 150 0 0 0 150'/%3E%3Cpolygon class='cls-1' points='600.5 150 1200 150 1200 0 600.5 150'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
}

background-imageに、エンコードしたURLを貼り付けます。
と言っても、ジェネレイトしたコードにbackground-imageが含まれているので、コピペすれば完了です。

その他の記述は疑似要素を使った、背景と同じように扱えます。

SVGの背景色を変更する方法

先ほどお伝えした、背景色が白じゃないとき、SVGの背景色を変更する方法です。

テキストで書かれたSVGを変更する

background-image: url(data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='r2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 150'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cg id='r1'%3E%3Cg%3E%3Cpolygon class='cls-1' points='0 150 600.5 150 0 0 0 150'/%3E%3Cpolygon class='cls-1' points='600.5 150 1200 150 1200 0 600.5 150'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E);

URLエンコードしたSVGコードの、太字で黄色背景にした個所にカラーコードを入力すると、色が変わります。

変換前の変更箇所はこんな感じです。
<style>.cls-1{fill:#fff;}</style>

%23がURLエンコードされた#(シャープ)になってまして、そのあとに16進数で色を指定すると。
サンプルは「#fff」なので白なわけですね。

fillというCSSのプロパティがSVGの塗りの指定になります。
※正確にはCSSじゃないんですけどね。

SVGのマークアップになります。
詳細はこちら。

読み込み中

SVG背景画像のまとめ

SVG背景、めちゃくちゃ便利じゃないですか？
ボーダーと比較して、色々と融通がきくので慣れれば扱いやすいです。

パーセントでサイズを変更できるので、1カラムじゃなくてもちゃんと三角形の真ん中がズレることなく表示されます！

私は今後、borderの疑似要素を使って三角背景を使うことはおそらく無いと思います！
だってこっちのが簡単でキレイに表示されますから。

SVG画像を用意する必要があると書きましたが、URLエンコードをするために必要なだけで、このサンプルで使っている三角背景でよければ、コピペすればそのまま流用可能です！

お気に召したらぜひ使ってみてください。

サンプルSVGの仕様

サンプルで使っている三角形の切り抜きSVGは、横幅：1200px 縦：150px、白背景で作られています。

background-image: url(data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='r2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 150'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cg id='r1'%3E%3Cg%3E%3Cpolygon class='cls-1' points='0 150 600.5 150 0 0 0 150'/%3E%3Cpolygon class='cls-1' points='600.5 150 1200 150 1200 0 600.5 150'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E);

色々な形のSVG背景画像を作って、面白い背景パターンを作ってみたいと思います！