frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

【CSS】clip-pathの対応ブラウザ、generateツール紹介

スポンサードリンク


スポンサードリンク


cssのclip-path プロパティは、表示領域を決められるcssのプロパティです。
つまり指定した位置を結んだ図形が表示され、その外側が非表示になります。
このcssを使えばどんな形にでもくり抜くことができるためデザインにこだわったサイトやアイディア次第でポートフォリオでも活躍しそうです。

ブラウザ対応状況

caniuse.com
IEは未対応ですね。EDGEも恐らく未対応です。
ポートフォリオであればchromeで見てもらえそうですが、案件で対象端末に未対応端末が含まれていればほかの方法で回避するしかなさそうです。

ツール

指定方法が難しいのでツールを使ったほうがいいです。
bennettfeely.com
位置と値が色分けされていてわかりやすいですね。

値の説明

三角形

,(コロン)区切りで点を配置していきます。

  • 点の1つ目の値がx軸
  • 点の2つ目の値がy軸
  • x軸は左が0%右が100%
  • y軸は上が0%下が100%

です。

-webkit-clip-path: polygon(50% 0%, 0 100%, 100% 100%);
clip-path: polygon(50% 0%, 0 100%, 100% 100%);

これを応用して吹き出しなんかも作れたりします。

-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

ツールなしでは作れませんね。