【簡単コピペOK】LPによくある大きい三角をつくる【CSS】

LPによく使われるセクション区切りの大きい三角をCSSで実装します。
レスポンシブに対応し、cssで実装するので、画像の使用を減らすことができます。

下記２種使います。

1.写真背景からベタ塗り背景に切り替える三角

See the Pen Untitled by mtrad_ingu (@mtrad_ingu) on CodePen.

2.ベタ塗り背景から写真背景　に切り替える三角

See the Pen Untitled by mtrad_ingu (@mtrad_ingu) on CodePen.

どちらも擬似要素とclip-pathを使用し作成しています。
LP作成時に活用できそうです！