clip-pathで要素を斜めにカットするCSSライブラリ・「Angled edges」

Ads

Angled edges

Angled edgesは要素を斜めにカットするためのCSSライブラリです。clip-pathを使っています。class付与で上デモのように手軽に斜めにカットできます。斜めにカットしなくちゃいけないシーンは個人的に思いつきませんがなんとなくよく見かける気はしますね。

需要はさておき、clip-pathがわけあって使えない!主にIEが!って場合は代替となるか分かりませんがtransformでも一応可能です。

雑なサンプルで済みませんがclip-pathではなくtransformを使った実装例です。単純に親要素を斜めにして子だけ元の角度に戻してるだけです。親要素はpositionプロパティで位置調整しています。
clip-pathの方が当然応用しやすいので代替とは言えない方法ですが一応。

Angled edgesのライセンスはMITとなっています。
Angled edges

タイトルとURLをコピーしました