corner-diagonals

コーナーの斜めカット

対象範囲

• ボタン、カード、パネル、コンテナーのシェルにのみ適用します。
• サーフェスの角を斜めにカットしたり、面取りしたりする場合に使用します。
• 視覚的な形状をクリップしても、クリック領域の判別しやすさと使いやすさを保ちます。
• システムとして統一感が生まれるよう、サーフェス間で同じコーナーのロジックを再利用します。

ビジュアルの目標

• 斜めのカットは、緻密でシャープかつ意図的な印象にします。
• カットは控えめにし、コンポーネントのサイズに比例させます。
• 1つ以上の角を面取りできますが、シルエットはひと目で認識できるようにします。
• 斜めのコーナーは、単発の小技ではなく、繰り返し用いる構造的なモチーフとして使います。

カットのトークン

:root {
  --corner-cut-sm: 8px;
  --corner-cut-md: 14px;
  --corner-cut-lg: 24px;
  --corner-line: rgba(255, 255, 255, 0.18);
  --corner-line-strong: rgba(255, 255, 255, 0.34);
  --corner-fill: rgba(10, 14, 24, 0.82);
  --corner-accent: #8b5cf6;
}

基本の形状

実際に斜めのシルエットにするには、clip-path: polygon(...) を使います。

.cut-all {
  --cut: var(--corner-cut-md);
  clip-path: polygon(
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut)),
    0 var(--cut)
  );
}

.cut-top-left-bottom-right {
  --cut: var(--corner-cut-md);
  clip-path: polygon(
    var(--cut) 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%,
    0 var(--cut)
  );
}

.cut-top-right-bottom-left {
  --cut: var(--corner-cut-md);
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    var(--cut) 100%,
    0 100%,
    0 0
  );
}

枠線付きシェル

枠線付きのサーフェスには、外側のラッパーと内側のサーフェスを使い、同じポリゴンを適用します。

.cut-shell {
  --cut: var(--corner-cut-md);
  --border-size: 1px;
  position: relative;
  padding: var(--border-size);
  background: linear-gradient(135deg, var(--corner-line-strong), transparent 46%, var(--corner-line));
  clip-path: polygon(
    var(--cut) 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%,
    0 var(--cut)
  );
}

.cut-shell__inner {
  min-height: 100%;
  padding: clamp(16px, 2.4vw, 28px);
  background: var(--corner-fill);
  clip-path: inherit;
}

<section class="cut-shell">
  <div class="cut-shell__inner">
    ...
  </div>
</section>

ボタンのパターン

.cut-button {
  --cut: var(--corner-cut-sm);
  position: relative;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 0;
  color: white;
  background: linear-gradient(135deg, var(--corner-accent), color-mix(in srgb, var(--corner-accent), black 28%));
  clip-path: polygon(
    var(--cut) 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%,
    0 var(--cut)
  );
}

.cut-button:hover {
  filter: brightness(1.08);
}

.cut-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--corner-accent), white 45%);
  outline-offset: 3px;
}

セカンダリボタン

斜めのアウトライン処理を施した、暗めのシェルを使います。

.cut-button-secondary {
  --cut: var(--corner-cut-sm);
  color: white;
  background:
    linear-gradient(var(--corner-fill), var(--corner-fill)) padding-box,
    linear-gradient(135deg, var(--corner-line-strong), transparent 58%, var(--corner-accent)) border-box;
  border: 1px solid transparent;
  clip-path: polygon(
    var(--cut) 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%,
    0 var(--cut)
  );
}

推奨パターン

• プライマリボタン：カット量を統一した、六角形風または面取りされた長方形を使います。
• セカンダリボタン：斜めのアウトライン処理を施した暗めのシェルと、控えめなホバー時の塗りつぶしを使います。
• カードとパネル：1つまたは2つの角を斜めにカットした、細い枠線のコンテナーを使います。
• 大きなセクション：階層を表現するため、直線的な外枠の内側に、角を斜めにカットしたブロックを入れ子にします。
• 対称の組み合わせ：左上と右下、または右上と左下を組み合わせます。

調整項目

• カットサイズ：小さなコントロールは 6px-10px、カードは 12px-18px、大きなパネルは 20px-32px にします。
• 枠線の処理：細いストローク、グラデーションのシェル、または内側の線を使い、シルエットを認識しやすくします。
• 一貫性：ボタンとコンテナーで同じポリゴンの系統を再利用します。
• アクセント：明るい色はプライマリコントロール、ホバー時の枠線、または注目状態に限定します。
• 動き：塗りつぶしを明るくする、枠線を表示する、オーバーレイをスライドさせるなどの動きを加え、形状は安定させます。

避けること

• 似たコンポーネント間で、カットサイズを無作為に変えること。
• 可読性を損なったり、コンポーネントが壊れているように見せたりする、過度なクリッピング。
• 明確な階層がないまま、角丸のピル型と面取りされた形状を混在させること。
• 背景だけをクリップし、枠線とクリック領域は長方形のままにすること。
• 斜めの形状を使ったすべてのサーフェスを、明るいアクセントカラーで塗りつぶすこと。

簡単な確認項目

• 枠線、背景、クリック領域に同じ斜めの形状が適用されています。
• カット後も、テキストの左右に十分な余白があります。
• ボタンの高さは、タッチ対象として少なくとも 44px を確保しています。
• 繰り返し使うコンポーネントでは、同じ --cut のスケールを使っています。
• フォーカス状態がクリップされた形状の周囲でも見える状態です。