Written by Kasumi

CSSで三角形の背景を作成。横幅100%でレスポンシブに可変させる方法

CSSで横幅100%の三角背景を作成したい。

また、レスポンシブに可変するようにしたい。

本記事ではこのような悩みを解決。

実装例を元に解説します。

実装サンプル

See the Pen
CSSで三角背景を作成する方法
by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

レスポンシブな横幅100%の三角背景が再現されてます。

三角背景の下に同色の背景コンテンツを連結してます。

実装手順は以下の通りです。

三角背景を作成するCSS

.tri {
  margin-top: 30px;
  width: 100%;
    //三角形の高さ
  padding-top: 90px;
  position: relative;
}
.tri::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
    //三角形の高さ
  border-bottom: 60px solid #faf7eb;
  border-left: 50vw solid transparent;
  border-right: 50vw solid transparent;
  transform: translateX(-50%);
}

三角背景を作成するCSSコード例です。

空のdivタグを用意して上記CSSをあてます。

padding-topプロパティの値に三角形の高さを予め決めます。

after擬似要素を用意。

borderプロパティで三角形を作成します。

border-bottomプロパティの太さ指定に、先ほど指定したpadding-topと同じ値を入れます。

positionプロパティを使って、擬似要素をポジション固定します。

transformプロパティでレスポンシブに可変するようにします。

以上で三角背景の実装完了です。

まとめ

CSSで三角背景を作成。横幅100%でレスポンシブに可変させる方法について紹介しました。

以上で解説を終わります。

目次

関連記事

HTMLCSS

【簡単】楽天GOLDページで画像・JS・CSSファイルのキャッシュが削除されない原因を解決!

更新日:2022.11.24
519
HTMLCSS プログラミング

【簡単】inputタグで入力した内容の履歴・入力候補を出さない方法【属性を設定すれば解決】

2022.02.24
3232
HTMLCSS

【HTML】OGPタグを設定してfacebookやtwitterに記事を発信しよう

更新日:2019.11.28
315
HTMLCSS

スマホを横向き・縦向きに切り替えた時だけ任意のCSSを実行する方法

2023.02.06
37