• HTMLCSS

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%でレスポンシブに可変させる方法について紹介しました。

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