clip-pathで背景を斜めにカットする

Result

CSSで背景を斜めにカットする方法です。別段特別な内容では無いです

未だに割と見かけるスタイリングですがtransformの方法しか書いてなかったので別の方法を書いておこうと思いました

clip-pathを使います

css

.title {
  clip-path: polygon(0 0, 100% 0%, 100% 60%, 0% 100%);
}

だいぶコードもスッキリしますし、何より汎用的で応用が利きやすいですね

html

<h1 class="title">CSS Tip of the day <span>17</span></h1>

HTMLも特別な方法は不要です

can i use

肝心のブラウザサポート状況ですが、悪くないんじゃないかなぁと思います。

もはやIEは無視していい時代でしょうしEdgeもChromeベースになるので今までより一層表現しやすくなりそうですね

via

コードは以下から借りました
CSS Tip of the Day 17