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

【簡単】CSSで背景画像だけ回転させる方法

2022.12.02
13429
HTMLCSS

【CSS】flexboxで最後の要素は右寄せ・最初の要素は左寄せにする方法

2022.07.14
5499
HTMLCSS プログラミング

tableタグのtd、thに入ってる文字がスマホだとサイズがおかしくなる原因【改善】

2021.06.03
5370
HTMLCSS

【CSS】aタグ内にaタグを入れる方法【簡単】

更新日:2019.11.28
1044