要素や画像を好きな形に、四角、丸、楕円、多角にトリミングができる CSSのclip-pathのまとめ

PR

以前、clip-path を使ってpolygonで多角形にくり抜く方法を紹介しましたが

今回は、それ以外にもある 丸、楕円 を紹介 (四角形系もありますが 再現出来なかったので今回は省略)

 

以前紹介したものはこちら

自由な形に画像の切り抜きができるSVGのclip-path polygonを CSSで行う

 

 

clip-path: 図形の種類(パラメータ);

図形の種類のところにに入るもの

  • circle = まんまるな円
  • ellipse = 楕円
  • plygon = 多角形
  • url = SVGを指定

 

CSSのみで完結できるのが 上の3つの circle,ellipse,polygon です

urlにはSVGファイルへのパス もしくはHTML内に書かれた SVGへのIDの指定で利用出来ます(こちらは最後のほうで)

現在CSSのみで完結する書き方が使えるブラウザは webkit系のみのようですので

実際に使用する場合には、-webkit-clip-path:; という風にプレフィックスを付けてやる必要があります

 

 

circle clip-path: circle(円の半径 at 座標X 座標Y);

まんまるな円にトリミングする場合には上のような書き方になります

at より前は円の半径

at の後ろには 円の中心点の座標を指定します

円の半径にはpxで座標は%で指定出来ます

 

clip-path: circle(131px at 64.6% 45.95%);

 

 

 

ellipse clip-path: ellips(横の半径 縦の半径 at 座標X 座標Y);

楕円にトリミングする場合は、まんまるの円ときと少しパラメータの書き方が違います

まんまるな円の場合は半径のみでしたが、楕円の場合は横方向の半径、縦方向の半径を指定することで楕円を作ります

座標の指定の仕方は、circleのときと同様です

 

clip-path: ellipse(171px 114px at 65.2% 41.15%);

 

 

 

polygon clip-path: polygon(ルール,X1座標 Y1座標,X2座標 Y2座標.X3座標 Y3座標, ・・・・);

ポリゴンは多角形の形にクリッピングします

3点以上が必要です

 

それぞれの点は X座標とY座標を使って指定します、ひとつの点ごとにカンマで区切ります

座標の数は無制限に指定出来ます

 

また、ルールとして nonzero と evenodd があります

初期値では nonzero となってます

点と点の線が 他の点と点の線と交差を繰り返した時の処理の違いを決めるものです

省略した場合は nonzero として動きます

 

nonzero の場合は、重なりある線の内側の領域もクリッピングします

evenodd の場合は線と線で囲まれた領域だけをクリッピングします

 

簡単な例では、 5点の星を一筆書きした場合に 星そのもの全てが領域になるのが nonzero

星の外側の三角形の部分だけがクリッピングの領域になるのが evenodd です

 

nonzero の場合

clip-path: polygon(nonzero, 270px 157px, 143px 69px, 293px 65px, 176px 157px, 218px 24px);

 

WS003265

 

evenodd の場合

clip-path: polygon(evenodd, 270px 157px, 143px 69px, 293px 65px, 176px 157px, 218px 24px);

WS003266

 

座標はpxで指定出来ます

 

 

 

SVG clip-path: url(SVGへのパス);

こちらの方法を使うとfirefoxのブラウザでclip-pathが使えます

SVGへのファイルを指定して使う方法と、HTMLにあるSVGへIDで指定してつかう方法があります

 

SVGファイルへのパスで指定

clip-path: url(svg.svg); //webkit系の場合

clip-path: url(svg.svg#svg-clip); //firefoxの場合

 

 

HTML中のSVGを指定

clip-path: url(#svg-clip);

HTML中のSVGにIDを指定して、そのIDをclip-pathで指定することでクリッピングできる

 

 

HTML

<clipPath id=”svg-clip”>
<circle cx=”150″ cy=”150″ r=”50″ />
</clipPath>

 

SVGで指定する場合は、SVGの書き方なのでCSSでのパラメータの書き方が違います

 

 

 

参考 URL

http://www.w3.org/TR/SVG/masking.html

http://docs.webplatform.org/wiki/css/properties/clip-path

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー