2020年02月6日(木)

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

• 0
• 9
• 5
• 14

Result

See the Pen CSS Tip of the Day 17 by kachibito
(@kachibito) on CodePen.

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

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

clip-pathを使います

css

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

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

html

CSS Tip of the day 17

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

can i use

Can I Use css-clip-path?

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

もはやIEは無視していい時代でしょうしEdgeもChromeベースになるの...