よく見る台形シェイプの実装方法を考えてみる

webデザインでよくみる台形型の斜めシェイプ、どうやって実装してますか？
ひとつのデザインに対して実装の引き出しが多い程、急な修正・変更にも柔軟に対応できるようになりますよね。
引き出し増やしたい。たいですね。

台形斜めシェイプの実装方法4つ

1. inear-gradientで２色背景
   
2. skewX(-16deg)で台形
   
3. クリップパスで台形
   
4. 擬似要素に２色背景

実装サンプルコード

See the Pen
台形シェイプ by nagaiyukari (@nagaiyukari)
on CodePen.

参考サイト

clip-pathについてはこちのジェネレーターが分かりやすいです。