Bagaimana untuk Mencipta Hujung Runcing Bermata Lancar untuk Imej Latar Belakang Menggunakan Kecerunan Linear?

Melaraskan Kecerunan Linear untuk Imej Latar Belakang Bertepi Lancar Hujung Runcing

Masalah:

Mencipta tepi bawah runcing untuk imej dengan dua segi tiga responsif menggunakan kecerunan linear menghasilkan tepi bergerigi.

Penyelesaian:

Untuk menghapuskan tepi bergerigi, elakkan menghentikan warna secara tiba-tiba dalam imej kecerunan linear . Sebaliknya, ubah suai titik henti untuk mencipta kesan kabur yang halus:

<code class="css">.lefttriangle {
  ...
  background-image: linear-gradient(to right top, #ffffff 48%, transparent 50%);
}
.righttriangle {
  ...
  background: linear-gradient(to left top, #ffffff 48%, transparent 50%);
}</code>

Pelarasan ini mengalihkan permulaan warna kedua sedikit dari penghujung warna pertama, menghasilkan peralihan yang lebih lancar.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Hujung Runcing Bermata Lancar untuk Imej Latar Belakang Menggunakan Kecerunan Linear?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!