ウェブ機能:
マスク
概要
CSS マスキングを使用すると、カードにノッチを追加したり、形状の枠線を作成したりするなど、要素をカスタム形状にクリップできます。複雑なレイアウトのためにシェイプを組み合わせる場合は、要素に含まれるコンテンツの種類に基づいてマスキング戦略を選択します。
| マスキング戦略 | 最適な用途 | テキストの効果 |
|---|---|---|
| 直接要素の SVG マスキング | 画像、アイコン、装飾的な形、複雑な形 | 非推奨（テキストが切り抜かれる可能性があります） |
| 隣接要素の SVG マスキング | テキスト、重要なコンテンツを含むカード | テキストは完全に読み取れる状態を維持 |
| 純粋な CSS グラデーション | シンプルな幾何学図形 | 非推奨（テキストが切り抜かれる可能性があります） |
実装
形状付きカットアウトを実装するには:
SVG マスクの使用
SVG マスクを使用すると、白（表示）と黒（非表示）の塗りつぶしを使用して、表示領域を減算または加算する形状を定義できます。
輝度マスクとアルファ マスク: SVG マスクはデフォルトで輝度（明るさ）モードに設定されています。そのため、
fill="white"を使用して領域を表示し、fill="black"を使用して領域を切り抜きます。色の代わりに SVG の透明度（アルファ チャンネル）を使用する場合は、CSS でmask-type: alpha;を設定するか、SVG の<mask>要素でmask-type="alpha"を設定します。
直接要素の SVG マスキング
要素内にテキストがない場合（プロフィールのアバター、商品画像、イラストなど）は、SVG マスクを要素に直接適用できます。
SVG マスク内で maskContentUnits="objectBoundingBox" を使用すると、マスクが適用される要素の幅と高さに合わせて自動的にスケーリングされます。
<!-- 1. Define the mask in SVG (hidden from view) -->
<svg width="0" height="0" style="position: absolute;" aria-hidden="true">
<defs>
<!-- objectBoundingBox makes the mask scale from 0 to 1 along the element's borders -->
<mask id="splat-mask" maskContentUnits="objectBoundingBox">
<!-- Organic Bezier path defining an artistic paint splat shape -->
<path d="M 0.5 0.05 C 0.58 0.05, 0.58 0.21, 0.67 0.18 C 0.76 0.15, 0.79 0.08, 0.85 0.15 C 0.91 0.22, 0.83 0.32, 0.89 0.38 C 0.95 0.44, 1.03 0.45, 0.99 0.55 C 0.95 0.65, 0.82 0.62, 0.8 0.72 C 0.78 0.82, 0.89 0.92, 0.8 0.97 C 0.71 1.02, 0.64 0.88, 0.55 0.93 C 0.46 0.98, 0.44 1.06, 0.35 1.01 C 0.26 0.96, 0.31 0.81, 0.22 0.79 C 0.13 0.77, 0.01 0.88, 0.01 0.77 C 0.01 0.66, 0.16 0.62, 0.14 0.52 C 0.12 0.42, -0.02 0.39, 0.03 0.29 C 0.08 0.19, 0.23 0.27, 0.29 0.19 C 0.35 0.11, 0.3 0.01, 0.4 0.01 C 0.5 0.01, 0.42 0.05, 0.5 0.05 Z" fill="white" />
</mask>
</defs>
</svg>
<!-- 2. Apply the mask to the image element -->
<img src="avatar.jpg" alt="User Profile" class="shaped-avatar">
<style>
.shaped-avatar {
width: 200px;
height: 200px;
object-fit: cover;
/* Apply the SVG mask ID with standard and webkit-prefixed properties */
-webkit-mask-image: url(#splat-mask);
mask-image: url(#splat-mask);
}
</style>
隣接要素の SVG マスキング
テキストを含む親要素ではなく、隣接する要素にマスクを適用します。これにより、テキストが切り取られず、読みやすくなります。
この問題を解決するには、コンポーネントを 2 つの部分からなるレイアウトに構造化します。
- すべての読み取り可能なコンテンツを格納する安全なマスクなしのテキスト コンテナ（
.card-body）。 - その横に配置された空の装飾用
div（.card-accent）。カスタム SVG マスクを受け取ります。
両方の部分に同じ背景色を割り当てることで、視覚的に 1 つのカスタム形状のコンポーネントに統合されます。
<!-- 1. Define the SVG mask (hidden from view) -->
<svg width="0" height="0" style="position: absolute;" aria-hidden="true">
<defs>
<!-- Use objectBoundingBox to make the mask scale with the element -->
<mask id="accent-stencil" maskContentUnits="objectBoundingBox">
<!-- Fill the entire area with white (fully visible) -->
<rect width="1" height="1" fill="white" />
<!-- Draw a black shape to cut out a concave curve. Extending the path to x=1.1 guarantees it fully clears the right edge, preventing subpixel lines -->
<path d="M 1.1,0 C 0.4,0.1 0.4,0.9 1.1,1 L 1.1,0 Z" fill="black" />
</mask>
</defs>
</svg>
<!-- 2. Create the unified card layout -->
<div class="unified-card">
<!-- The text-bearing element remains unmasked and perfectly rectangular -->
<div class="card-body">
<h3>Premium Membership</h3>
<p>Get exclusive weekly updates on modern web standards and premium UI designs.</p>
</div>
<!-- The empty accent element next to it is masked to form the custom shape -->
<div class="card-accent"></div>
</div>
<style>
.unified-card {
display: flex;
width: 400px;
}
.card-body {
flex: 1;
background-color: #1e293b; /* Elegant slate color */
color: #f8fafc;
padding: 24px;
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
}
.card-accent {
width: 60px;
background-color: #1e293b; /* Same background color so they merge visually without seams */
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
/* Reference the SVG mask */
-webkit-mask-image: url(#card-accent-mask);
mask-image: url(#card-accent-mask);
}
</style>
シンプルな切り抜きに単一の CSS グラデーションを使用する
単純な幾何学的な切り抜き（半円形の上部ノッチ、側面のインデント、直線的な斜めの切り抜きなど）のみが必要な場合は、外部 SVG を記述したり参照したりする必要はありません。代わりに、mask-image プロパティ内で CSS の放射状または線形グラデーションを直接定義できます。
<div class="gradient-masked-card">
<h3>Notched Coupon Card</h3>
<p>This card uses a pure CSS radial gradient to cut out a semi-circular notch along its top edge.</p>
</div>
<style>
.gradient-masked-card {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
padding: 40px 24px 24px 24px; /* Extra top padding ensures content clears the notch */
border-radius: 16px;
text-align: center;
/* radial-gradient places a circle at 50% (horizontal center) and 0% (top edge), cutting out a 20px transparent notch */
-webkit-mask-image: radial-gradient(circle at 50% 0%, transparent 20px, black 21px);
mask-image: radial-gradient(circle at 50% 0%, transparent 20px, black 21px);
}
</style>
代替戦略
ブラウザが mask-image または接頭辞付きのバージョンをサポートしていない場合:
- シェイプ画像の場合: 要素は正常に劣化し、デフォルトのフォールバック スタイルで通常の長方形要素として表示されます。
- シェイプカードの場合: 隣接する装飾的な
.card-accent要素は、マスクされていない単色の長方形のままになります。テキスト コンテナと同じ背景色を共有しているため、カード全体が標準のすっきりとした長方形のコンテナとしてレンダリングされます。 - プログレッシブ エンハンスメント: テキストレイヤをマスクの外側に完全に配置することで、古いブラウザでもコンテンツの可読性、構造、アクセシビリティが完全に維持されます。