cman.jp > パーツ作成メニュー > 画像のデザイン > 画像の切り抜き

画像の切り抜き／多角形

画像の切り抜きを指定するにはＣＳＳの「clip-path」を使用します。
「clip-path」の指定で、矩形、円形、星形などさまざまな形で画像の切り抜きが可能です。

当ページでは、clip-pathの基本シェイプ機能の polygon(多角形) の頂点の座標をマウス操作で取得し、CSSが作成されます。

生成された「html」「css」などのソースコードは、そのままコピー＆ペーストで利用することが出来ます。

画像をいろいろな形で切り抜いてみよう

サンプル図形

3角
4角
5角
6角
7角
8角
9角
10角
11角
12角

座標表示	なしマーク横一覧
スケール	なしあり

使用したhtml

<img src="clippath.gif" class="c-sample" width="300" height="300">

生成したCSS

<style type="text/css">
.c-sample {   /* 多角形の頂点を指定 */
  clip-path: : polygon(0px 0px ,0px 150px ,150px 150px ,150px 0px );  
}
</style>

ページTOP

色々な画像の切り抜き

画像を円形に切り抜き

clip-pathの基本シェイプ機能のcircle(円形) で、円形に切り抜きが出来ます。

clip-pathの基本シェイプ機能は、多角形、円形のほか、楕円形(ellipse)、長方形(inset)の切り抜きも可能です。

「clip-path」の指定方法は以下を参照ください。
clip-path 「画像の切り抜き」の構文

<img src="clippath.gif" class="sample1" width="200" height="200">

<style type="text/css">
.sample1 {
  clip-path: circle(90px at center);   /* 半径と画像の中心点（center)を指定 */
}
</style>

複雑な形状で画像を切り抜き

clip-pathは、基本シェイプ機能以外に、<SVG>で指定した形状で切り抜きができます。

<SVG>内の<path>要素に指定した複雑な形状で画像の切り抜きができます。

<img src="clippath.gif" class="sample2" width="200" height="200">
<svg xmlns="http://www.w3.org/2000/svg" style="position: absolute;">
<defs>
<clipPath id="sample-path">
  <path d="M25,25 L100,150 C200,200 250,50 50,25 Z">
  </path>
</clipPath>
</defs>
</svg>

<style type="text/css">
.sample2 {
  clip-path: url(#sample-path);  /* <svg>で指定した<clitpath>のIDを指定 */
}
</style>

テキストで画像を切り抜き

<SVG>内の<text>要素に指定した文字で画像の切り抜きができます。

<img src="clippath.gif" class="sample3" width="600" height="200">
<svg xmlns="http://www.w3.org/2000/svg" style="position: absolute;">
<defs>
<clipPath id="sample-text">
  <text x="5" y="150" textLength="600" font-size="100px" font-weight="bold">Lovely Cat!!
  </text>
</clipPath>
</defs>
</svg>

<style type="text/css">
.sample3 {
  clip-path: url(#sample-text);  /* <svg>で指定した<clitpath>のIDを指定 */
}
</style>

ページTOP

留意事項

「clip-path」は、未対応のブラウザもあります。
<svg>は、複雑な形状や複数の形状での切り抜きなど、「clip-path」の基本シェイプ機能で不可能な場合のみ使用する事をお勧めします。

生成できるホームページ・パーツ一覧
	文字のデザイン
	画像のデザイン
	ボタンのデザイン
	入力項目のデザイン
	テーブルのデザイン
	BOXのデザイン
	吹き出しのデザイン
	ページのデザイン
	図形のデザイン
ご利用時の注意事項・制約事項
よくあるご質問
	何で無料なの？
	生成コードに利用制限はある？
	生成コードに保証はある？
	jQueryで生成できない？