実際のレイアウトで使う CSS clip-path

六角形プリセットを選び、出力を宣言のみへ切り替えて clip-path をコピーし、自分で定義した正方形画像のクラスに入れます。幅と高さを同じにし、object-fit: cover を指定します。完全版の CSS は 4:3 のデモ枠を含むため、アバターにそのまま貼り付けないでください。顔が端に寄っていないか確認し、多角形を変えても被写体は自動では動かない点に注意します。

シェブロンをボタン横の装飾画像に使います。同じ割合座標を正方形と横長の枠で比較すると角度が変わる場合があります。モバイル幅も確認し、重要な文字やリンクを装飾部分の外に置きます。

平行四辺形をカードの背景装飾に使います。内容全体に適用すると見出しやフォーカス枠も切れることがあります。完成した画面で Tab 移動を試し、両方の幅で操作対象が見えることを確認します。

六角形のプリセットから始め、最初の点を X 30%、Y 0% に設定します。選択した点の後に点を追加したり、3〜32 点の範囲で削除したりできます。ドラッグ、0〜100% の座標入力、矢印キー（1%、Shift 併用で 10%）で調整します。既存のレイアウトを保つには clip-path 宣言のみをコピーしてください。完全な CSS にはデモ用のスタイルが含まれます。正方形と横長の枠をパソコンとスマートフォンで確認し、文字やフォーカス枠は切り抜きの外に置き、長方形の代替表示を用意します。CSS のインポートや circle、ellipse、inset の編集には対応していません。

このガイドと関連ツールは Toolars が保守しています。説明と現在の出力に相違があれば、両方を確認できるようお知らせください。

以下のダウンロード例は合成テスト入力であり、顧客の事例ではありません。再現時は入力と設定を揃え、プレビューだけでなくダウンロードしたファイルを記載の確認項目と照合してください。

確認の範囲はこの例に限られ、すべてのファイル、ブラウザー、利用先ソフトでの動作を保証しません。ツールの変更後は再確認し、共有前に自分の出力も確認してください。

Toolars の合成サンプル・更新日 2026-09-13。操作手順の例であり、実際の写真やスキャン品質、提出先の受理を示すものではありません。

CSS サンプルは六角形プリセットです。CSS clip-path で六角形を選び、水平点を24、垂直点を50にします。ダウンロードとサンプルの2つの clip-path 宣言を比較してください。色や空白は異なっても構いません。広い要素と狭い要素で試します。百分率は要素の枠に従い、切り抜きだけでは文章は回り込みません。

入力サンプルをダウンロード