Salah satu pola desain desain yang cukup umum yang mungkin Anda temui adalah balok dengan transisi sudut warna gradien. Itu terlihat seperti gambar di bawah ini.
Gradien sudut dalam persegi panjangSaya menemukan ini saat mengerjakan salah satu proyek kami dan alih-alih menerapkan efek seperti itu menggunakan gambar atau SVG, kami memutuskan untuk menggunakan gradien linier, yang keuntungannya adalah cukup mudah untuk mengubah sudut kemiringan, warna gradien, dll. langsung di CSS.
Gambar 2: tepi bergerigi dari gradien sudutHasilnya tampak seperti yang ditunjukkan pada Gambar 2. Seperti yang Anda lihat, takik menonjol cukup menonjol muncul di perbatasan transisi warna gradien.
Untungnya, ada cara yang sangat sederhana untuk menyelesaikan masalah ini! Biasanya, ketika Anda ingin membuat garis perubahan warna yang tajam dalam gradien linier, tulis kode seperti ini:
background: linear-gradient(176deg, white, white 75%, black 75%, black 100%);
Ini berarti bahwa dalam kisaran 0 hingga 75% dari ukuran blok, warna isian akan menjadi putih, dan mulai dengan 75% - hitam. Ini menciptakan garis yang agak bergerigi. Sayangnya, dengan sudut gradien tertentu dan ukuran blok, zigzag yang agak jelek dapat terjadi.
Koreksi ini membutuhkan perubahan yang sangat kecil - tambahkan bagian desimal ke persentase kedua, yang akan membuat sedikit kabur pada garis transisi warna. Tergantung pada situasi spesifik Anda, mungkin perlu untuk memilih nilai yang diperlukan agar kekaburan tidak terlalu terlihat - tetapi secara visual melicinkannya.
background: linear-gradient(176deg, white, white 75%, black 75.3%, black 100%);
Perbandingan garis gradien bergerigi dan halusContoh CodePen:
Saya berharap di masa depan ini akan membantu Anda dalam menyelesaikan masalah.
Terima kasih amakhrov untuk ide dengan "calc"Menurut pendapat saya, dengan calc () itu akan lebih dapat diandalkan: tidak tergantung pada ukuran dan sudut kemiringan linear-gradient(176deg, #A663CC, #A663CC 75%, #6F2DBD calc(75% + 1px))