斜め背景です。
分かりやすいように、親のBOXは水色背景にしてあります。
:before 疑似要素をブロック化、position:absolute で背景として使用します。
で、それを transform: skew（スキュー）で、傾けます。
子要素に div を入れ、それを :before よりも上に表示
（z-indexなどで）されるようにすれば完成です。
矢印背景です。
「border」の太さは、％は使用できませんが、
vw（viewport width） とかは使用できるので、それで対応できます。
:before と :after で、上下にborder でとんがったものを表示させます。
ただし・・・この矢印背景の方法ですと、
＋画像背景やグラデーション背景の場合はちょっと応用力が必要になります。
矢印背景（背景画像込み）です。
白色のborderを乗せることで、マスクをかけるような形で使用します。