Potongan Berbentuk

Fitur web: Masker

Ringkasan

Dengan Masking CSS, Anda dapat mengklip elemen ke bentuk kustom, seperti menambahkan notch ke kartu atau membuat batas berbentuk. Saat menggabungkan bentuk untuk tata letak yang kompleks, pilih strategi penyamaran berdasarkan jenis konten yang ada dalam elemen:

Strategi penyamaran Paling Sesuai Untuk Dampak Teks
Masking SVG Elemen Langsung Gambar, Ikon, Bentuk dekoratif, Bentuk kompleks Tidak direkomendasikan (dapat memangkas teks)
Masking SVG Elemen yang Berdekatan Kartu dengan Teks, Konten penting Teks tetap dapat dibaca sepenuhnya
Gradien CSS Murni Bentuk Geometris Sederhana Tidak direkomendasikan (dapat memangkas teks)

Penerapan

Untuk menerapkan potongan berbentuk:

Menggunakan Masker SVG

Masker SVG memungkinkan Anda menentukan bentuk yang mengurangi atau menambah area yang terlihat menggunakan isian putih (menampilkan) dan hitam (menyembunyikan).

Luminance vs. Alpha Masking: Masker SVG secara default menggunakan mode luminance (kecerahan), itulah sebabnya kami menggunakan fill="white" untuk menampilkan area dan fill="black" untuk memotongnya. Jika Anda lebih suka menggunakan transparansi SVG (saluran alfa) daripada warna, Anda dapat menetapkan mask-type: alpha; di CSS atau mask-type="alpha" di elemen <mask> SVG.

Masking SVG Elemen Langsung

Jika tidak ada teks di dalam elemen yang perlu dikhawatirkan (seperti avatar profil, gambar produk, atau ilustrasi), Anda dapat menerapkan mask SVG langsung ke elemen.

Menggunakan maskContentUnits="objectBoundingBox" di dalam mask SVG memastikan bahwa mask diskalakan secara otomatis ke lebar dan tinggi elemen apa pun yang diterapkan.

<!-- 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>

Masking SVG Elemen yang Berdekatan

Terapkan mask ke elemen yang berdekatan, bukan ke elemen induk yang berisi teks. Hal ini memastikan bahwa teks tidak terpotong dan tetap dapat dibaca.

Untuk mengatasinya, susun komponen Anda menjadi tata letak dua bagian:

  1. Penampung teks yang aman dan tidak disamarkan (.card-body) untuk semua konten yang dapat dibaca.
  2. div dekoratif kosong (.card-accent) yang ditempatkan di sampingnya, yang menerima mask SVG kustom.

Dengan menetapkan warna latar belakang yang sama untuk kedua bagian, keduanya akan digabungkan secara visual menjadi satu komponen berbentuk kustom.

<!-- 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>

Menggunakan Satu Gradien CSS untuk Potongan Sederhana

Jika Anda hanya memerlukan potongan geometris sederhana (seperti takik atas setengah lingkaran, indentasi samping, atau potongan diagonal lurus), Anda tidak perlu menulis atau mereferensikan SVG eksternal. Sebagai gantinya, Anda dapat menentukan gradien radial atau linear CSS langsung di dalam properti mask-image.

<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>

Strategi penggantian

Jika browser tidak mendukung mask-image atau versi dengan awalan:

  • Untuk Gambar Berbentuk: Elemen akan menurun secara halus, ditampilkan sebagai elemen persegi panjang normal dengan gaya penggantian defaultnya.
  • Untuk Kartu Berbentuk: Elemen .card-accent dekoratif yang berdekatan akan tetap berupa persegi panjang solid tanpa mask. Karena memiliki warna latar belakang yang sama dengan penampung teks, seluruh kartu akan dirender sebagai penampung persegi panjang standar yang rapi.
  • Progressive Enhancement: Dengan menjaga lapisan teks sepenuhnya di luar mask, konten Anda dijamin akan tetap dapat dibaca, terstruktur, dan diakses sepenuhnya di browser lama.