画像で作成しないcssでの見出しデザイン

Question

タイトル通りなのですが、画像編集ソフトがなくcssで背景画像に色背景を乗せたデザインを作成したいです。レクチャーいただければ幸いです
実現したいデザインは添付画像

html、cssはcodepenにあります
https://codepen.io/boo-jp/pen/MWEwMrL

Answer 1

まず、変形の原点を center にします。

transform-origin: bottom left;
を下記に修正
transform-origin: center;

.overlay::afterのCSS設定を下記のように修正。

skewYをskewXに修正
幅と左位置をお好みで設定。

例えば、

  .overlay::after {
    width: 50%;
    left: 25%;
    transform: skewX(-36deg);
  }

.overlay::after の設定は、メディアクエリで分散して設定してあるので、それぞれ必要に応じて修正。

修正例↓
CodePenサンプル