CSS maskプロパティで画像をiOS7/8のアイコン型に切り出す

CSSとSVGを使ってiOS7/8で使われているアイコンの形に画像を切り出します。この輪郭の曲線はborder-radiusだけでは表現できません。

css mask iOS7/8 icon

左: Firefox、 右: Google Chrome

CSSのmaskプロパティを使用しますが、現時点でSafariやChromeなどしか対応していません。

img {
    width: 250px;
    height: 250px;
    -webkit-border-radius: 24%;    
    border-radius: 24%;
    -webkit-mask: url(iOS7IconShape.svg) top left / cover;
    mask: url(iOS7IconShape.svg) top left / cover;
}

Firefoxではclip-pathを使うと可能ですが、svgもそれに合わせる必要が出てくるので今回はborder-radiusで代用するに留めます。Firefoxのことですから、そのうちmaskプロパティにも対応するのではないかと思います。

コードをいじって試してみたい方はこちら JSFIDDLE - デモ