See the Pen maker background by This is standard (@koutafunahashi) on CodePen.
p.tis{ padding: 0 16px; background-color: #FCDF42; transform: skew(-16deg,0deg); display: inline-block; } p.tis span{ display: block; transform: skew(16deg,0deg); }
ポイントはtransform: skew();で、親要素 (p) と子要素 (span) に追加します。
子要素にも追加しないとテキストも斜めになってしますので、値を反転して要素をあてます。
もう一つのポイントとして、子要素がインライン要素の時はブロック要素にしましょう。
画像を使わず、ちょっとした装飾を施しました。