【CSS】Concave Corner（逆角丸）の作成ガイド｜Figmaでの作成から実装コードまで徹底解説

海外で人気の「Bento Grid」と相性が良く、最近は国内のモダンなサイトでも定番となっている「Concave Corner（逆角丸）」。この「くぼみ」が境界を滑らかに繋ぎ、単調になりがちなレイアウトに洗練された印象を与えてくれます。

本記事では、Figmaでのデザイン手順から、Webサイトで再現するためのコーディング手法まで詳しくご紹介します。

Concave Corner とは

Concave Cornerは、モダンなUIデザインにおいて、カード同士の連結部分などに「抜き」の表現を加える際によく使われる手法です。

Concave Corner を使用しているサイト紹介

以下のサイトは、メルボルンのバイオ特化型ハブ 『Colabs – Making space for transformative innovation.』のコーポレートサイトです。
各コンテンツの要素に美しい逆角丸が活用されています。

Colabs – Making space for transformative innovation.

Colabs – Making space for transformative innovation.

DNP RECRUITING | ここは、未来創造プラットフォーム。 | DNP 大日本印刷

DNP RECRUITING | ここは、未来創造プラットフォーム。 | DNP 大日本印刷

Concave Corner を作ってみよう！

Figmaでは、2つのシェイプを「減算（Subtract selection）」で組み合わせるだけで、この逆角丸を驚くほど簡単に再現できちゃいます!

早速作っていきましょう!

1. シェイプの作成

まずはベースとなる大きな長方形（背景用）小さな正方形の2つを用意します。
この際、作成したシェイプにはあらかじめ「角丸」を設定しておきましょう。

---

2. 「減算（Subtract selection）」を実行

次に、小さな正方形を大きな長方形の角（削りたい位置）に重ねて配置し、Shiftキーを押しながら両方のシェイプを選択します。

その後、ツールバー上部のブーリアン演算メニューから「減算（Subtract selection）」をクリックしてください。

---

3. 細部の調整

型抜きされた部分を確認しながら、サイズや位置、角丸のサイズを微調整します。
Figmaのブーリアン演算は非破壊編集であるため、作成後も中の正方形を動かして「くぼみ」の深さを自由に変更できるのが利点です。

これでFigmaでのConcave Corner（逆角丸）の作成は完了です!
実装する際は、CSSの疑似要素（::before / ::after）にbox-shadowを利用して配置することで、再現が可能になります!

Concave Corner が作れるプラグインの紹介

手動での作成以外にも、専用のプラグインを使用することでより効率的に作成が可能です。

Concave Border Radius

このプラグインを使用すると、Figma上で逆角丸のシェイプをより直感的に生成・調整することができます。

Concave Corner のシェイプをWeb上でも再現しよう！

1. 疑似要素にbox-shadowを使用する方法

これは「透明な円」の周囲に、背景色と同じ色の巨大な影（box-shadow）を広げることで、あたかも角が削れているように見せるテクニックです。

• メリット: 古いブラウザでも動作が安定している。
• デメリット: 背景が複雑な画像やグラデーションの場合、影の色を合わせるのが難しい。

See the Pen knowledge_concave-corner_001 by Yugo Harima (@yh-kasou-knowledge) on CodePen.

---

2. ClipPathを使用する方法

clip-path プロパティを使うと、要素自体を特定の形に切り抜くことができます。
Figmaで作成したシェイプをSVGとして書き出し、そのパスを利用することで複雑な形も正確に再現可能です。

• メリット: 背景が画像であっても綺麗に切り抜ける。
• デメリット: パスの指定（ path() ）に慣れが必要。

See the Pen knowledge_concave-corner_002 by Yugo Harima (@yh-kasou-knowledge) on CodePen.

関連ナレッジ記事

SVGファイルの埋め込みと活用術｜HTMLでの表示方法/CSSでのBackground・Mask実装

SVGファイルの埋め込みと活用術｜HTMLでの表示方法/CSSでのBackground・Mask実装

まとめ

Concave Corner（逆角丸）は、Figmaの「減算」機能を活用することで、非破壊かつ簡単に作成できます。実装面では、背景の状況に応じて「box-shadow」と「clip-path」を使い分けるのがポイントです。