Cara membuat efek luar biasa dengan bentuk CSS

Sep 16, 2025

Bagaimana caranya

Pengembang frontend cenderung berpikir dalam persegi panjang; Persegi panjang di dalam persegi panjang di dalam persegi panjang di dalam persegi panjang. Kami mungkin mempekerjakan trik dengan batas untuk membuat lingkaran atau segitiga, tetapi benar-benar mereka masih hanya kotak persegi panjang yang menyamar. Nah ini akan berubah dengan CSS. Bentuk, A. W3C. Rekomendasi kandidat yang akan mengubah cara Anda berpikir.

Penawaran Natal: Hemat hingga 47% pada langganan Net Magazine

Bentuk CSS memungkinkan Anda untuk membuat bentuk geometris menggunakan fungsi bentuk: lingkaran (), ellipsis (), inset () dan poligon (), dan menerapkannya pada elemen atau efek seperti kliping dan filter. Terlebih lagi, bentuk-bentuk dapat memengaruhi aliran konten, memungkinkan Anda untuk membungkus teks dengan rapi di sekitar fitur seperti avatar bundar.

Mungkin fungsi bentuk paling kuat adalah poligon () karena memungkinkan Anda membuat bentuk sewenang-wenang yang kompleks menggunakan poin tak terbatas yang didefinisikan menggunakan pasangan koordinat. Jika Anda pernah menggunakannya Svg. , Ini akan terbiasa denganmu.

Dalam tutorial ini, kami akan menggunakan poligon dengan properti clip-path untuk memotong bentuk geometris dari teks kami sehingga hanya area yang tertutup dalam poligon yang terlihat. Kami juga akan menambahkan beberapa transisi sederhana untuk menghadirkan efeknya. Anda dapat mengambil kode untuk setiap langkah dalam repo ini dari GitHub, ini dia .

01. Mulai dengan HTML

Pertama, mari kita siapkan html kita. Kami hanya perlu & lt; div & gt; , kita .klip kelas dan teks kami, tetapi karena kami akan menggunakan elemen pseudo untuk efek ini, kami juga akan menambahkan atribut dengan nilai yang sama dengan teks sehingga kami dapat membacanya ke dalam CSS daripada hard-coding itu.

 & lt; div class = "klip" data-konten = "Demo kliping" & gt;
Demo kliping
& lt; / div & gt;

Selanjutnya, kami ingin membuatnya mengisi layar dan menyelaraskan teks Dead Center - kita dapat menggunakan beberapa FlexBox sihir untuk ini. Mari kita juga gaya dan ukuran teks.

 .clip {
// isi layar
Posisi: absolut;
TOP: 0;
Kiri: 0;
Lebar: 100%;
Tinggi: 100%;
// Alignment.
Tampilan: Flex; // gunakan Flex for Alignment
membenarkan konten: pusat; // penyelarasan horizontal.
Align-Item: Center; // penyelarasan vertikal.
// Styling Teks
Font-family: 'Work Sans', Arial, Helvetica, Sans-Serif; // Work Sans tersedia dari Google Font
Font-weight: 800;
Ukuran font: 8REM;
Teks-Align: Center;
Teks-transformasi: huruf besar;
}

02. Tambahkan gaya

Sekarang kita bisa menata ::sebelum dan ::setelah Elemen pseudo, dengan masing-masing menjadi lapisan di atas teks. Secara default, ::setelah akan memiliki indeks Z tertinggi. Yang berguna attr () Selector akan membaca nilai kami Konten Data atribut.

Unsur-elemen pseudo akan berbagi posisi dan sifat flexbox, sehingga kami dapat memperbaiki CSS kami sedikit dan memanfaatkan kekuatan SCS untuk menjaga stylesheet kami merapikan. Styling font akan diwarisi. Kami menggunakan ... untuk menunjukkan sifat-sifat yang sudah kita bahas.

 .clip {
...
// posisi diri (& amp;) dan elemen pseudo (sebelum / sesudah)
& amp;,
& amp; :: Sebelumnya,
& amp; :: setelah {
  Posisi: absolut;
  TOP: 0;
  Kiri: 0;
  Lebar: 100%;
  Tinggi: 100%;
  Tampilan: Flex; // gunakan Flex for Alignment
  membenarkan konten: pusat; // penyelarasan horizontal.
  Align-Item: Center; // penyelarasan vertikal.
}
& amp; :: Sebelumnya,
& amp; :: setelah {
  Konten: ATTR (Konten Data); // Gunakan nilai atribut sebagai konten
}
}

Hasil di browser harus terlihat identik, karena elemen pseudo duduk langsung di atas teks. Anda dapat memodifikasi gaya mereka di Devtools. untuk melihat bagaimana mereka berlapis.

03. Setel latar belakang dan warna

Saatnya memberi setiap lapisan warna dan latar belakang yang berbeda - mari kita pergi untuk warna neon yang berani, tren, yang telah kita tetapkan sebagai variabel. Kami juga dapat memaksa teks untuk membungkus beberapa baris menggunakan trik padding CSS daripada menambahkan ini dalam HTML.

Ini bermanfaat karena kalau tidak kita harus menggunakan dua jenis istirahat garis: & lt; br & gt; di dalam & lt; div & gt; dan semakin tidak jelas \SEBUAH dalam atribut.

 .clip {
...
& amp;,
& amp; :: Sebelumnya,
& amp; :: setelah {
  Padding: 0 50%;
  Ukuran kotak: border-box;
}
& amp; :: sebelum {
  Warna: $ putih;
  Latar belakang: $ pink;
}
& amp; :: setelah {
  Warna: $ pink;
  Latar Belakang: $ Biru;
}
}

Trik padding bekerja dengan memberikan teks nol lebar horizontal, memaksa browser untuk membungkus setiap kata ke baris baru.

04. Klip teks

Saatnya untuk bit yang menarik - kami siap untuk mulai memotong teks kami. Kita akan membuat klip diagonal, mengiris layar menjadi dua segitiga dari kiri bawah ke kanan atas.

Itu ::sebelum Elemen pseudo hanya akan terlihat di segitiga kiri atas, dan ::setelah Elemen pseudo hanya akan terlihat di segitiga kanan bawah. Inilah kode untuk mencapai itu:

 .clip {
...
& amp; :: sebelum {
  clip-path: polygon (0 0, 100% 0, 0 100%, 0 100%);
}
& amp; :: setelah {
  Clip-Path: Polygon (100% 0, 100% 100%, 0 100%, 100% 0);
}
}

Ini menciptakan poligon dengan empat poin. Setiap titik dijelaskan oleh pasangan koordinat; hanya nilai x (kiri ke kanan) dan y (atas ke bawah). Nilainya dapat mutlak (misalnya: px) atau relatif (misalnya:%). Poin direferensikan ke kiri atas, jadi poin di 100% 100% berada di kanan bawah.

Bayangkan garis menghubungkan masing-masing poin dalam urutan yang terdaftar untuk membentuk bentuk. Dalam ::sebelum poligon itu dimulai di kiri atas (0 0) , bergerak melintasi layar ke kanan atas (100% 0) , dan kemudian turun ke kiri bawah (0 100%) .

Semoga Anda akan melihat teks terpotong Anda sekarang. Ubah ukuran browser dan Anda akan melihat kliping bereaksi sesuai.

Jika Anda menggunakan Chrome, Anda mungkin akan melihat beberapa masalah pengapalan sambil mengubah ukurannya, disebabkan oleh lapisan komposit Chrome. Sayangnya, karena demo layar penuh, direkomendasikan Will-Change: Transform Properti dan Transformasi: Translatez (0) hack tidak memperbaiki ini. Namun, jika Anda beralih .klip untuk Posisi: Tetap; berhasil.

 klip {
& amp;,
& amp; :: Sebelumnya,
& amp; :: setelah {
  Posisi: Tetap;
}
}

Ingatlah bahwa Chrome berusaha membantu, dan solusi ini akan berdampak pada kinerja. Pastikan untuk kinerja profil saat melakukan hal-hal seperti ini dalam produksi.

05. Tambahkan transisi

Sekarang kami telah mendapatkan teks terpotong kami, mari kita hidupkan dengan beberapa transisi. Berita baiknya adalah Anda dapat dengan mudah bertransisi Clip-Path. properti sehingga browser melakukan semua kerja keras. Mari kita aktifkan transisi pada elemen pseudo, dan kemudian mendefinisikan empat negara yang berbeda untuk transisi antara.

Negara 1: Ini adalah keadaan awal, jadi mari kita buat tiga lainnya

Tambahkan setiap blok di bagian bawah CSS Anda saat Anda pergi, sehingga Anda dapat melihat seperti apa.

State 2: Pindahkan segitiga sedikit untuk mengungkapkan latar belakang

Ini akan terlihat sedikit seperti bendera Republik Kongo. Menghapus 20 persen dari ujung masing-masing segitiga poligon akan melakukan trik.

Negara 3: Morf segitiga menjadi persegi panjang

Ini mirip dengan Tricolor Prancis, terbalik.

Bagaimana dengan pasangan koordinat keempat itu? Nah, ini adalah tempat yang bermanfaat. Ternyata transisi itu Clip-Path. Hanya berfungsi jika fungsi bentuk yang digunakan adalah sama (jadi poligon & gt; poligon) dan jumlah titik yang digunakan adalah sama - browser akan bertransisi setiap titik individu. Itu sebabnya kami memiliki titik tersembunyi keempat itu - itu memungkinkan kita untuk transisi mulus dari segitiga ke persegi panjang, kita hanya mengungkapkan titik keempat itu ketika kita membutuhkannya.

 .clip {
& amp; :: sebelum {
  Clip-Path: Polygon (0 0, 40% 0, 40% 100%, 0 100%);
}
& amp; :: setelah {
  Clip-Path: Polygon (100% 0, 100% 100%, 60% 100%, 60% 0);
}
}

Negara 4: putar poligon itu

Berpegang teguh pada tema bendera kami, ini akan menyerupai 'Saya memerlukan tarikan' di dunia pensinyalan bendera maritim.

Di sini kita memutar poligon sehingga mereka menyeberang di tengah dan masing-masing membentuk dua segitiga. Ini adalah ketika transisi dapat membantu Anda memahami pasangan koordinasi. Dengan benar-benar memperlambat transisi, Anda dapat melihat bagaimana setiap titik bergerak melintasi layar ke posisi barunya, dan Anda mulai memahami bagaimana pemesanan pasangan mempengaruhi transisi. Ini sebenarnya memberi Anda cukup banyak kendali atas transisi.

 .clip {
& amp; :: sebelum {
  Clip-Path: Polygon (100% 0, 0 0, 100% 100%, 0 100%);
}
& amp; :: setelah {
  Clip-Path: Polygon (100% 0, 100% 100%, 0 0, 0 100%);
}
}

Bungkus

Kita semua siap tetapi kita belum dapat mengubah negara bagian, yang berarti Anda tidak dapat melihat transisi beraksi. Ada banyak cara untuk mencapai ini, jadi terserah Anda. Di repo dan codepen, saya telah menggunakan solusi bebas javascript 100 persen dengan tombol radio tersembunyi dan pemilih saudara ~ General Sibling - lihat. Anda juga dapat memeriksa codepen tutorial ini sini .

Artikel ini awalnya muncul dalam masalah 298 dari bersih , majalah untuk desainer dan pengembang web profesional - menawarkan tren web baru terbaru, teknologi, dan teknik. Beli masalah 298 di sini atau berlangganan bersih di sini .

Penawaran Natal Khusus: Hemat hingga 47% pada langganan ke Net untuk Anda atau teman untuk Natal. Ini adalah tawaran terbatas, jadi gerakkan dengan cepat ...

Artikel terkait:

28 Contoh Luar Biasa CSS
Cara membuat tata letak piramida dengan bentuk CSS
Trik CSS untuk merevolusi tata letak web Anda

Cara membuat efek luar biasa dengan bentuk CSS

01. Mulai dengan HTML

02. Tambahkan gaya

03. Setel latar belakang dan warna

04. Klip teks

05. Tambahkan transisi

Bungkus

Bagaimana caranya - Artikel Terpopuler

Cara menggambar leher dan bahu

Bangun prototipe dengan Adobe XD

10 cara untuk menciptakan animasi karakter yang lebih baik

Cara menggabungkan 3d dan komik seni di Zbrush

Bagaimana cara mencapai pencahayaan yang lebih baik dengan V-Ray

5 Tips Untuk Meningkatkan Kreasi VR Anda

cat adegan epik New York

Cara menguasai seni penggemar 3D

Kategori