SVG背景を使えば下三角形の背景もラクラク

SVG背景を使えば下三角形の背景もラクラク

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

#197 SVG背景

WEB制作

下向きの三角形で区切られたWEBデザインの時どうしますか?疑似要素を使ったborderで対応するのが多いと思います。 これからは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を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背景画像を作って、面白い背景パターンを作ってみたいと思います!

記事内で紹介している商品リスト
(価格はAmazon参考価格)

CSS設計完全ガイド ~詳細解説+実践的モジュール集

3,608円(税込)

CSS設計完全ガイド ~詳細解説+実践的モジュール集

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

2,948円(税込)

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

HTML5 & CSS3 デザインレシピ集

3,025円(税込)

HTML5 & CSS3 デザインレシピ集

HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門

2,838円(税込)

HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門

HTML&CSSとWebデザインが 1冊できちんと身につく本

2,508円(税込)

HTML&CSSとWebデザインが 1冊できちんと身につく本

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

2,486円(税込)

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

2,640円(税込)

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

3,480円(税込)

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

今すぐ使えるかんたんPLUS+ HTML5&CSS3 完全大事典 (今すぐ使えるかんたんPLUSシリーズ)

1,958円(税込)

今すぐ使えるかんたんPLUS+ HTML5&CSS3 完全大事典 (今すぐ使えるかんたんPLUSシリーズ)

イラスト図解式 この一冊で全部わかるWeb技術の基本

1,848円(税込)

イラスト図解式 この一冊で全部わかるWeb技術の基本

SVG背景の関連ページ

tableデザイン

tableで作る表をシンプルでキレイに作るHTMLとCSS

tableで表を作るときに気を付けたいのが、どこまでシンプルでわかりやすく作れるかという点ではないかと個人的には思ってます

CLS対策上級編

CLS対策上級編 CSSのインライン化とAdcence遅延読み込み

CSSのインライン化とGoogle Adcence遅延読み込みでGoogleのスコアを大幅に改善しCLSもほぼ0にしました

CSSで作る横スライド

1行のCSSで作る横スライドの作り方

CSSのoverflow-x: scrollを使った横スライドの簡単な作り方と事例紹介です。 簡単便利はいいことだ。

marginとpadding

CSSのmarginとpaddingの違いについて

CSSのmarginとpaddingの違いについて解説しました。 余白をつくるプロパティの使いわけおを考える。

CLS対策初級編

CLS改善をしてPageSpeed Insightsを大幅改善

CLS(Cumulative Layout Shift)を改善する方法とCLSを確認する方法などをまとめました。

WEBフォント設定

WEBフォント使用時の最適な設定を考える

私のサイトではNotoSansJPのWEBフォントを使用しています。 可能な限り速度とCLSを考慮して使っております。

アイキャッチの作り方

参考にならない適当につくるアイキャッチの作り方!

ブログのアイキャッチをどうやって作っているかの解説であって、効果があがるとかクリック率が高いとかそういうのじゃないです。

アンカーリンクナビ

交差監視を利用したアンカーリンクナビゲーション

JavaScriptの「Intersection Observer」を使い、ナビゲーションが変化するアンカーリンクを作りました。

bookblock

本をめくるJqueryライブラリ bookblock

本をめくるようなモーションを実現するbookblock.jsを改造してレスポンシブ対応にしてみました。

jquery-match-height.js

高さを簡単に揃えるjquery-match-height.js

簡単に要素の高さを揃える「jquery-match-height.js実際の使用例をわかりやすく画像付きで解説しています。

indexOf

JavaScriptのIndexOfの使い方の復習

indexOfを使ってindex番号を取得する方法の解説記事を書いていたら、indexOfを使わなくても取得できました。

交差監視

Intersection Observer APIを図解で解説

Intersection Observerを仕事で使ったときに理解度が足りないと感じわかりやすい解説記事を書きました。

スクロール監視

スクロール監視の新定番 intersecton observer API

スクロールに応じて何を変更させたりするときに便利なintersecton Observer APIの解説記事です。

つまづきやすい5つのポイント

【初心者むけ】Jqueryのつまづきやすい5つのポイント解説

Jqueryの構文がわかってなかったとき、とりあえずコピペして使ってました。 ちゃんと理解して使うとできることが増えます

ランダム表示バナー

PHPで作るランダムバナー表示プログラム

PHPでランダム表示させるバナープログラムです。 バナーと言っていますが、別にバナーじゃなくてもランダムで表示できます。

PHPを使って作るCMS

PHPを覚えたらSQLも覚えて自作のCMSを作ってみよう

PHPを覚えたらデータベース回りも一緒に覚えるのがオススメです、 制作できるものの幅が広がって色々な仕組みを理解できます

日付比較

キャンペーン期間中だけ表示させるPHPプログラム

期間限定の表示は訴求が強いけど、取り忘れるとユーザーに損した気分を与えてしまうので、忘れずにしっかり対応したいですね。

PHPで作るカレンダーの作り方2

PHP+jQueryで作る土日祝日が選べないカレンダーの作り方

PHPで作るカレンダーの作り方の第二弾です。 今回はクリックした日付を取得してformに代入するところも解説してます。

PHPの覚え方

PHPの良いところは難しいと思われていること

PHPって人が思っているほど難しくなく、便利でいろいろな面白いものを作れるプログラミング言語です。

配列の解説

PHPの連想配列の多次元配列を使ったクイズの作り方

PHPの配列ってイメージは付くけどちゃんと理解するのが難しい。 例題がわかりづらいせいだと思うんですよね。これはわかりやすい。

SNSでこの記事をシェアできます

ブログ デイリーアクセスランキング

車用スマホホルダー
1位

車用スマホホルダー

スマホをカーナビとして使うと熱さで充電ができなくなるので、熱対策と1年間使って外れることがなかったスマホホルダーの紹介。

SVG背景
2位

SVG背景

SVG背景を覚えたらborderで背景画像を作るのが馬鹿らしくなります。 それくらい簡単で汎用性の高い方法です。

ノートPCスタンド
3位

ノートPCスタンド

ノートパソコンを横にしまうと結構な専有面積があるのですが、立てて収納できればわずか数cmで使えるので本当に快適です!

MusicBeeのレイアウト変更方法
4位

MusicBeeのレイアウト変更方法

MusicBee 3.1のレイアウトをデフォルトの状態から、自分好みのレイアウト設定に変更する方法を写真付きで紹介しています。

MusiceBee
5位

MusiceBee

PCで音楽の再生と管理をするならiTunseよりもMusicBeeがオススメです。軽くて早くて便利で使いやすい。

GA4カスタムイベント
6位

GA4カスタムイベント

GA4のカスタムイベントをGTMを使い設定する方法です。 イベント、パラメータ、カスタムディメンションの解説記事です。

アンカーリンクナビ
7位

アンカーリンクナビ

JavaScriptの「Intersection Observer」を使い、ナビゲーションが変化するアンカーリンクを作りました。

音楽再生
8位

音楽再生

パソコンに取り込んだ音楽をせっかくならCDコンポから再生したいと思ったことありませんか?AUXを使った外部接続の方法の紹介です。

CSSで作る横スライド
9位

CSSで作る横スライド

CSSのoverflow-x: scrollを使った横スライドの簡単な作り方と事例紹介です。 簡単便利はいいことだ。

PHPで作るカレンダー
10位

PHPで作るカレンダー

forとifとforeachがメインのPHPによるカレンダーの作り方です。 祝日設定がちょっとめんどくさいんですよね。

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

世の中にある比較サイトや、いかがでしたか系サイトが嫌いなんです。使ってないのにえらそうなこと言うなと。なので体験談です。

WEB制作

WEB制作

WEBサイトを作れますと一言に言っても色々な技術があるわけですよ。アウトプットの形は一緒でもいろいろこだわりがあるんです。

カメラ

カメラ

2018年4月に購入したソニーのミラーレス一眼「α7Ⅲ」に関連する記事一覧ページです。 作例集やカメラグッズレビューなど。

美味しいもの

美味しいもの

食に関してはあまりこだわりがないんですけどね、こだわりがない分美味しいと思ったものは本当においしいと思ったものなんですよ

Amazonプライム動画

Amazonプライム動画

Amazonプライム会員なら無料で利用できるAmazonプライム動画から、いろいろな動画をみたレビュー記事のまとめページ

旅LOG

旅LOG

家族旅行やおでかけした際の旅ブログです。夏休みの家族旅行(4人家族)で訪れた観光名所の感想などを記しています。

プロフィール

プロフィール

Start-Point.netの管理人のプロフィール紹介を兼ねた、自分の中のルールや決め事やエピソードなでお書いていきます

日記

日記

日記と言っても色々な日記があるわけで、記録的な日記や心理描写を色濃く描いた日記などをまとめたページです。

thanks

thanks

自分を表現することって意外と難しいんですよね。照れがあったり、間違ったこといってないかとよくわからない何かと戦ったりして。

記事内で紹介している商品

CSS設計完全ガイド ~詳細解説+実践的モジュール集

3,608
(税込)