Bentuk CSS yang lebih baik menggunakan bentuk () – Bagian 1: Garis dan busur – Beragampengetahuan

Membuat bentuk CSS klasik dan salah satu latihan favorit saya. Memang, saya memiliki salah satu koleksi terbesar bentuk CSS, di mana Anda dapat dengan mudah menyalin kode untuk bentuk apa pun. Saya juga menulis panduan luas tentang cara membuatnya: Panduan modern untuk membuat bentuk CSS.

Meskipun saya membahas lebih detail tentang sebagian besar teknik dan trik modern, CSS masih berkembang dan selalu ada sesuatu yang baru untuk menyederhanakan kehidupan pengembang kami. terkini, clip-path Ditingkatkan ke yang baru shape() nilai. Aturan sebenarnya dari permainan!

Sebelum kita masuk, ada baiknya disebutkan shape() Saat ini, fitur ini hanya didukung dalam Chrome 137+ dan Safari 18.4+ ketika ditulis pada Mei 2025.

Apa itu shape()?

Izinkan saya mengutip deskripsi spesifikasi resmi:

Dan path() Fungsi memungkinkan penggunaan kembali sintaks jalur SVG untuk mendefinisikan bentuk yang lebih sewenang -wenang daripada fungsi bentuk yang lebih profesional memungkinkan, yang membutuhkan penulisan jalur sebagai string tunggal (tidak kompatibel dengan jalur pembuatan bagian var () dan mewarisi banyak keterbatasan dalam SVG, seperti unit PX implisit.

ini shape() Fungsi menggunakan serangkaian perintah, yang kira -kira sama dengan path()tetapi gunakan lebih banyak sintaks CSS standar untuk melakukan ini dan memungkinkan berbagai fungsi CSS seperti unit dan fungsi matematika lainnya.

Dengan kata lain, kami memiliki kemampuan SVG di CSS, yang dapat kami kombinasi dengan kemampuan yang ada, mis. var(),,,,, calc()unit yang berbeda, dll. SVG sudah pandai menggambar bentuk yang kompleks, jadi bayangkan fitur yang lebih kuat dimungkinkan.

Jika Anda terus membaca spesifikasinya, Anda akan menemukan:

Dalam hal ini shape() Itu superset path(). satu path() Dapat dengan mudah dikonversi ke shape()tapi untuk mengubah shape() Kembali ke satu path() Atau Anda memerlukan informasi tentang lingkungan CSS.

Tebak apa itu? Saya telah membuat konverter online dari SVG ke CSS. Simpan alat ini karena sangat nyaman. Jika Anda sudah pandai membuat bentuk SVG atau kode yang ada, Anda tidak perlu menemukan kembali roda. Anda menempelkan kode ke generator dan mendapatkan kode CSS, yang dapat Anda sesuaikan dengan mudah nanti.

Mari kita coba menggunakan logo beragampengetahuan. Berikut adalah SVG yang saya pilih dari situs web:

<svg width="35px" height="35px" viewBox="0 0 362.62 388.52" >
  <path d="M156.58,239l-88.3,64.75c-10.59,7.06-18.84,11.77-29.43,11.77-21.19,0-38.85-18.84-38.85-40C0,257.83,14.13,244.88,27.08,239l103.6-44.74L27.08,148.34C13,142.46,0,129.51,0,111.85,0,90.66,18.84,73,40,73c10.6,0,17.66,3.53,28.25,11.77l88.3,64.75L144.81,44.74C141.28,20,157.76,0,181.31,0s40,18.84,36.5,43.56L206,149.52l88.3-64.75C304.93,76.53,313.17,73,323.77,73a39.2,39.2,0,0,1,38.85,38.85c0,18.84-12.95,30.61-27.08,36.5L231.93,194.26,335.54,239c14.13,5.88,27.08,18.83,27.08,37.67,0,21.19-18.84,38.85-40,38.85-9.42,0-17.66-4.71-28.26-11.77L206,239l11.77,104.78c3.53,24.72-12.95,44.74-36.5,44.74s-40-18.84-36.5-43.56Z"></path>
</svg>

Anda membawa nilai menjadi d properti, tempel ke konverter, dan kemudian KemakmuranDan Anda memiliki CSS berikut:

.shape {
  aspect-ratio: 0.933;
  clip-path: shape(from 43.18% 61.52%,line by -24.35% 16.67%,curve by -8.12% 3.03% with -2.92% 1.82%/-5.2% 3.03%,curve by -10.71% -10.3% with -5.84% 0%/-10.71% -4.85%,curve to 7.47% 61.52% with 0% 66.36%/3.9% 63.03%,line by 28.57% -11.52%,line to 7.47% 38.18%,curve to 0% 28.79% with 3.59% 36.67%/0% 33.33%,curve to 11.03% 18.79% with 0% 23.33%/5.2% 18.79%,curve by 7.79% 3.03% with 2.92% 0%/4.87% 0.91%,line by 24.35% 16.67%,line to 39.93% 11.52%,curve to 50% 0% with 38.96% 5.15%/43.51% 0%,smooth by 10.07% 11.21% with 11.03% 4.85%,line to 56.81% 38.48%,line by 24.35% -16.67%,curve to 89.29% 18.79% with 84.09% 19.7%/86.36% 18.79%,arc by 10.71% 10% of 10.81% 10.09% small cw,curve by -7.47% 9.39% with 0% 4.85%/-3.57% 7.88%,line to 63.96% 50%,line to 92.53% 61.52%,curve by 7.47% 9.7% with 3.9% 1.51%/7.47% 4.85%,curve by -11.03% 10% with 0% 5.45%/-5.2% 10%,curve by -7.79% -3.03% with -2.6% 0%/-4.87% -1.21%,line to 56.81% 61.52%,line by 3.25% 26.97%,curve by -10.07% 11.52% with 0.97% 6.36%/-3.57% 11.52%,smooth by -10.07% -11.21% with -11.03% -4.85%,close);
}

Harap dicatat bahwa Anda tidak perlu memberikan apapun viewBox data. Konverter akan secara otomatis menemukan persegi panjang terkecil dari bentuk dan menghitung koordinat titik yang sesuai. tidak lagi viewBox Sakit kepala, tidak perlu melawan overflow atau jarak ekstra!

Berikut adalah contoh lain tentang bagaimana saya menerapkan bentuk pada elemen gambar. Saya menyimpan SVG asli sehingga Anda dapat membandingkan dua bentuk.

Kapan harus digunakan shape()

Saya ingin mengatakan “selalu”, tetapi tidak. Dalam pemandu saya, saya membedakan dua bentuk: hanya bentuk garis lurus dan bentuk kurva. Setiap jenis dapat diulang. Akhirnya, kami memiliki empat jenis bentuk.

Jika kami tidak memiliki kurva dan tidak memiliki pengulangan (kasus paling sederhana), clip-path: polygon() Pekerjaan ini harus dilakukan. Jika kami memiliki duplikat (dengan atau tanpa kurva), mask Ini cara untuk pergi. Dan maskkami dapat mengandalkan gradien yang dapat memiliki ukuran dan pengulangan tertentu, tetapi clip-path Kami tidak punya pilihan seperti itu.

Jika Anda memiliki kurva dan tidak memiliki duplikasi, itu baru shape() Itu adalah pilihan terbaik. Di masa lalu, kami harus mengandalkan mask sejak clip-path Sangat terbatas, tapi bukan itu masalahnya. Tentu saja, ini bukan aturan umum, tetapi cara saya sendiri untuk mengidentifikasi opsi mana yang merupakan cara yang paling tepat. Pada akhirnya, ini selalu merupakan basis kasus per kasus, karena kita mungkin perlu mempertimbangkan hal-hal lain seperti kompleksitas kode, fleksibilitas metode, dukungan browser, dll.

Mari kita gambar beberapa bentuk!

Cukup bicara, mari kita pindah ke bagian yang menarik: menggambar bentuk. Saya tidak akan menulis tutorial untuk dijelaskan shape(). Itu akan membosankan dan tidak menyenangkan. Sebaliknya, kami akan menggambar beberapa bentuk umum dan belajar melalui latihan!

persegi panjang

Ambil poligon berikut:

clip-path: polygon(
  0 0,
  100% 0,
  100% 100%,
  0 100%
);

Secara teknis, ini tidak akan membantu, karena akan menarik persegi panjang yang sudah mengikuti bentuk elemen persegi panjang, tetapi masih merupakan titik awal kita yang sempurna.

Sekarang, mari kita gunakan shape().

clip-path: shape(
  from 0 0,
  line to 100% 0,
  line to 100% 100%,
  line to 0 100%
);

Kode harus diproklamirkan sendiri, kami sudah memiliki dua perintah. ini from Perintah selalu merupakan perintah pertama dan hanya digunakan sekali. Itu hanya menentukan titik awal. Lalu kita punya line Perintah untuk menggambar baris ke titik berikutnya. Sejauh ini, tidak ada yang rumit.

Kita masih bisa menulisnya dengan cara yang berbeda seperti:

clip-path: shape(
  from 0 0,
  hline to 100%,
  vline to 100%,
  hline to 0
);

Antara dua poin 0 0 Dan 100% 0hanya nilai pertama yang diubah, yang berarti kita berasal 0 0 tiba 100% 0Oleh karena itu, gunakan hline to 100% Anda hanya perlu menentukan offset horizontal. Gunakan logika yang sama vline Di mana kita menggambar garis vertikal 100% 0 Dan 100% 100%.

Saya tidak merekomendasikan Anda untuk menggunakan hline Dan vline Karena mereka bisa rumit dan sulit dibaca. Selalu gunakan dari line Kemudian, jika Anda ingin mengoptimalkan kode, Anda dapat menggunakan hline atau vline Bila berlaku.

Kami memiliki bentuk pertama dan kami tahu perintah untuk menggambar garis lurus:

Guntingan bundar

Sekarang mari kita coba tambahkan guntingan melingkar di bagian atas bentuk:

Untuk ini, kami akan mengandalkan arc perintah, jadi mari kita pahami cara kerjanya.

Jika kami memiliki dua titik A dan B, kami memiliki tepat dua lingkaran dengan jari -jari yang diberikan yang memotong dua titik yang ditunjukkan pada gambar. Titik persimpangan memberi kita empat kemungkinan busur yang dapat ditarik antara titik A dan B. Setiap busur ditentukan oleh ukuran dan orientasi.

Dalam beberapa kasus, jari -jari sama dengan setengah jarak antara A dan A. Dalam hal ini, hanya dua busur yang dapat ditarik, dan arah yang akan menentukan yang mana.

Sintaks terlihat seperti ini:

clip-path: shape(
  from Xa Ya, 
  arc to Xb Yb of R [large or small] [cw or ccw]
);

Mari kita tambahkan ke bentuk kami sebelumnya. Tidak ada nilai yang perlu dipertimbangkan. Sebaliknya, mari kita gunakan orang acak dan lihat apa yang terjadi:

clip-path: shape(
  from 0 0,
  arc to 40% 0 of 50px,
  line to 100% 0,
  line to 100% 100%,
  line to 0 100%
);

Tidak buruk, kita bisa melihat 0 0 Dan 40% 0. Harap dicatat bagaimana saya tidak menentukan ukuran dan orientasi busur. Secara default, browser akan menggunakan small Dan ccw.

Mari kita jelaskan ukuran dan orientasi untuk melihat empat situasi yang berbeda:

Yah, itu bekerja di dua blok pertama, tetapi tidak ada blok lain. Sangat aneh, kan?

Sebenarnya, semuanya baik -baik saja. Busur ditarik di luar area elemen dan karenanya tidak terlihat. Jika Anda menambahkan beberapa box-shadowAnda dapat melihatnya:

Busur bisa rumit karena hal -hal seperti ukuran dan orientasi, jadi bersiaplah untuk bingung. Jika ini terjadi, ingatlah bahwa Anda memiliki empat situasi yang berbeda dan mencoba semuanya dapat membantu Anda menemukan situasi yang Anda butuhkan.

Sekarang mari kita coba menjadi akurat dan tempatkan setengah lingkaran jari -jari spesifik di tengah:

Kita dapat mendefinisikan jari -jari sebagai variabel dan menggunakan apa yang telah kita pelajari sejauh ini:

.shape {
  --r: 50px;

  clip-path: shape(
    from 0 0, 
    line to calc(50% - var(--r)) 0, 
    arc to calc(50% + var(--r)) 0 of var(--r), 
    line to 100% 0, 
    line to 100% 100%, 
    line to 0 100%
  );
}

Ini berfungsi dengan baik, tetapi kodenya masih dioptimalkan. Kita bisa mengganti semua line Memesan hline Dan vline sebagai berikut:

.shape {
  --r: 50px;

  clip-path: shape(from 0 0, 
    hline to calc(50% - var(--r)), 
    arc to calc(50% + var(--r)) 0 of var(--r), 
    hline to 100%, 
    vline to 100%, 
    hline to 0
  );
}

Kami masih bisa menggunakannya 1%:

.shape {
  --r: 50px;

  clip-path: shape(from 0 0, 
    hline to calc(50% - var(--r)), 
    arc to calc(50% + var(--r)) 0 of 1%,
    hline to 100%, 
    vline to 100%, 
    hline to 0
  );
}

Ketika Anda mendefinisikan jari -jari kecil (setengah jarak antara dua titik), tidak ada lingkaran yang dapat mencocokkan kondisi yang kami jelaskan sebelumnya (persimpangan dengan dua titik), jadi kami tidak dapat menggambar busur. Situasi ini jatuh dalam penanganan kesalahan, dan browser akan mengukur jari -jari sampai kita dapat memiliki lingkaran yang memenuhi kondisi. Alih -alih memperlakukan situasi ini sebagai situasi yang tidak valid, browser menyelesaikan “kesalahan kami” dan menarik busur.

Penanganan kesalahan ini sangat keren karena memungkinkan kami untuk menyederhanakan kami shape() Fungsi. Alih -alih menentukan jari -jari yang tepat, saya hanya mengusulkan nilai kecil bahwa browser akan melakukan pekerjaan untuk saya. Trik ini hanya berfungsi jika busur yang akan kita gambar adalah setengah lingkaran. Jangan mencoba menggunakan apapun arc Perintahnya adalah karena tidak akan selalu berhasil.

Optimalisasi lain adalah memperbarui yang berikut:

arc to calc(50% + var(--r)) 0 of 1%,

… Dan ini:

arc by calc(2 * var(--r)) 0 of 1%,

Hampir semua perintah tersedia to Instruksi atau by menginstruksikan. Yang pertama mendefinisikan koordinat absolut, seperti yang kita gunakan polygon(). Ini adalah lokasi yang tepat dari sudut pandang yang kami pindahkan. Yang kedua mendefinisikan koordinat relatif, yang berarti kita perlu mempertimbangkan poin sebelumnya untuk mengidentifikasi koordinat poin berikutnya.

Dalam kasus kami, kami memberi tahu ARC untuk mempertimbangkan beberapa poin pertama (50% - R) 0 Dan lulus 2*R 0jadi poin terakhir akan (50% - R + 2R) (0 + 0),Dan (50% + R) 0.

.shape {
  --r: 50px;

  clip-path: shape(from 0 0, 
    hline to calc(50% - var(--r)), 
    arc by calc(2 * var(--r)) 0 of 1px, 
    hline to 100%, 
    vline to 100%, 
    hline to 0
  );
}

Optimalisasi akhir sangat bagus karena jika kita ingin memindahkan guntingan dari pusat kita hanya perlu memperbarui satu nilai: 50%.

.shape {
  --r: 50px;
  --p: 40%;

  clip-path: shape(
    from 0 0, 
    hline to calc(var(--p) - var(--r)),
    arc by calc(2 * var(--r)) 0 of 1px, 
    hline to 100%, 
    vline to 100%, 
    hline to 0
  );
}

Bagaimana Anda menyesuaikan potongan di atas di bagian bawah, kiri atau kanan? Itu tugas pertama Anda! Coba lakukan ini sebelum pindah ke bagian berikutnya.

Saya akan melakukan implementasi sehingga Anda dapat membandingkan dengan implementasi Anda, tetapi jangan menipu! Jika Anda dapat melakukan ini tanpa merujuk pada pekerjaan saya, Anda akan dapat melakukan bentuk yang lebih kompleks dengan lebih mudah.

Label melingkar

Potongan yang cukup, mari kita coba membuat label melingkar:

Bisakah Anda melihat masalah ini? Mirip dengan bentuk sebelumnya, itu adalah sekelompok arc Dan line Memesan. Ini kodenya:

.shape {
  --r: 26px;
  
  clip-path: shape(
    /* left part */
    from 0 100%,
    arc by var(--r) calc(-1 * var(--r)) of var(--r),
    vline to var(--r),
    arc by var(--r) calc(-1 * var(--r)) of var(--r) cw,
    /* right part */
    hline to calc(100% - 2 * var(--r)),
    arc by var(--r) var(--r) of var(--r) cw,
    vline to calc(100% - var(--r)),
    arc by var(--r) var(--r) of var(--r)
  );
}

Ini terlihat agak menakutkan, tetapi jika Anda mengikutinya dengan perintah, menjadi lebih jelas untuk melihat apa yang sedang terjadi. Berikut adalah nomor yang dapat membantu Anda memvisualisasikan bagian kiri.

semua arc Perintah sedang digunakan by Instruksi adalah karena dalam semua kasus saya selalu perlu bergerak dengan offset sama dengan R, yang berarti saya tidak perlu menghitung koordinat titik. Dan jangan mencoba menggunakan 1% Karena tidak berhasil, karena kita akan menggambar seperempat lingkaran, bukan lingkaran.

Karena itu, kita dapat dengan mudah mencapai perubahan kiri dan kanan:

Perhatikan bahwa saya hanya menggunakan dua arc Perintah bukan tiga. Sudut bulat dapat dicapai dengan menggunakan jari -jari perbatasan klasik, sehingga dapat membantu kita menyederhanakan bentuknya.

Radius terbalik

Bentuk terakhir, kurva internal klasik di sudut, juga disebut jari -jari terbalik. Berapa banyak arc Apakah kita membutuhkan perintah? Periksa gambar berikut dan pertimbangkan.

Jika jawaban Anda enam, Anda memilih cara yang sulit untuk melakukannya. Adalah logis untuk mempertimbangkan enam busur karena kami memiliki enam kurva, tetapi tiga di antaranya dapat dilakukan dengan jari -jari perbatasan sederhana, jadi hanya tiga busur yang diperlukan. Selalu luangkan waktu untuk menganalisis bentuk yang Anda buat. Terkadang, properti CSS dasar dapat membantu membuat bentuk.

Apa yang kamu tunggu? Ini adalah tugas Anda berikutnya dan saya tidak akan memberi Anda beberapa nomor kali ini. Anda membutuhkan semua hal yang perlu membuatnya dengan mudah. Jika Anda berjuang, baca satu ke artikel dan cobalah untuk menggali lebih dalam bentuk sebelumnya.

Inilah implementasi saya dari empat varian ini:

sebagai kesimpulan

Itu saja. Anda harus memiliki gambaran yang baik shape() Fungsi. Kami fokus line Dan arc Cukup untuk membuat perintah yang merupakan bentuk paling umum.

Jangan lupa untuk menambahkan SVG ke konverter CSS dan mengawasi koleksi bentuk CSS saya di mana Anda dapat menemukan kode untuk semua bentuk yang saya buat. Ini adalah bentuk terakhir yang mengakhiri artikel ini.