CSSコーナーカッター
ボックスの4つのコーナーを独立して切る、刻む、またはくり抜くCSS clip-path/maskの宣言を生成します。コーナーごと、または全コーナーを同じスタイルとサイズで、pxまたは％で、ライブプレビュー付き。
入力
下記の各コーナーカットのサイズ単位。
有効にすると、すべてのコーナーのスタイルとサイズが各コーナーに適用されます。
50％を超えるパーセンテージサイズは制限され、対向するコーナーが重なりません。
出力
カットされたコーナーのボックスがここに表示されます。
上記のプレビューと一致するインラインスタイル付きのdiv — どこにでも貼り付けられます。
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-corner-cutter \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"unit": "px",
"linked": "true",
"allStyle": "bevel",
"allSize": "24"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-corner-cutter` tool (CSS Corner Cutter) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-corner-cutter/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSSコーナーカッター — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
"カット"されたコーナーとは何ですか？
border-radiusは滑らかに丸められたコーナーのみを生成します。カットされたコーナーは異なります。ボックスから材料のくさびを削除し、そのくさびには3つの一般的な形状があります：
- ベベル（Bevel）— 単一の斜線で、カード、ボタン、価格タグの古典的な「クリップされたコーナー」ルック。
- ノッチ（Notch）— 直角のステップカット。チケット/スタブのシルエットを四角くします。
- スクープ（Scoop）— コーナーから内側に曲がる凹型の弧。コーナーから噛みつかれたような形状。
このツールは3つのいずれかの組み合わせに対応した、貼り付け可能なCSS宣言を生成します。コーナーごとに独立して設定でき、ライブプレビュー付きです。
このツールを使用する方法
- 単位（
pxまたは%）を選択してください — 下記のすべてのコーナーのサイズに適用されます。 - すべてのコーナーを同じにするをオンのままにして、1つのスタイルとサイズを4つのコーナーすべてに一度に設定するか、オフにして各コーナー（左上、右上、右下、左下）を独立して設定します — ベベル、ノッチ、スクープを自由に混ぜるか、コーナーのサイズを
0のままにして四角いままにします。 - CSSをコピーして、定義された幅/高さを持つ任意の要素に適用してください。プレビューは正確な外観を示します。下のHTMLスニペットは同じマークアップで、スタイルシートが便利でない場所ならどこにでも貼り付けられる自己完結型の
<div>です。
なぜ2つの異なるCSS技術を使うのですか？
ベベルとノッチは両方ともストレートラインでできているため、clip-path: polygon(...)の追加ポイントとして表現されます — CSSクリップパスジェネレーターのシェイプライブラリで使用されるのと同じ技術です。スクープは異なります。clip-path polygon()はポイント間の直線のエッジのみを描画できるため、滑らかな弧で内側に曲げる方法はありません。凹の曲線を彫刻するには、radial-gradientから構築されたmask-imageが必要です — 1つはコーナーごと、カット半径の内側は透明、外側は不透明。clip-pathとmaskは同じ要素に適用される独立したプロパティなので、このツールは、いくつかのコーナーでストレートカットを混ぜて他のコーナーでスクープと組み合わせるときはいつでも、両方のブロックを一緒に出力します。ブラウザはそれらの交差をレンダリングします。
FAQ
すべてのブラウザで機能しますか？
clip-path: polygon()とmask-imageは、現在のChrome、Firefox、Safari、およびEdgeで広くサポートされています。生成されたCSSには、使用されるプロパティの-webkit-接頭辞付き形式が常に含まれます。Safariはmask-imageに対して歴史的に必要としてきたためです。
パーセンテージサイズのスクープが予想より小さいのはなぜですか？
パーセンテージサイズは50に制限されているため、対向するコーナーのカットが相互に重なりません。
シンプルな丸いコーナーだけが必要で、カットは必要ないのですが、何を使用すればよいですか？
それはborder-radiusで、カットではありません — ボーダーラジウスジェネレーターを使用してください。アップロードしたアクチュアル画像のコーナーを丸めている場合（ライブボックスのCSS生成ではなく）、Round Cornersを使用してください。
プライバシー
すべてはあなたのブラウザで起こります。選択したスタイルとサイズはサーバーに送信されることはありません — CSSとプレビューは、コントロールを調整するときにローカルで生成および更新されます。