Bagaimana untuk Mencapai Garis Licin dengan Kecerunan Linear dalam Latar Belakang Segi Tiga?

Kecerunan Linear Mencipta Tepi Bergerigi dalam Imej Latar Belakang: Cara Melicinkan Garisan

Dalam usaha untuk mencipta tepi bawah yang runcing pada imej , seseorang boleh memilih untuk menghasilkan dua segi tiga responsif di pangkalan. Walau bagaimanapun, mencapai garis licin dalam reka bentuk sedemikian boleh terbukti mencabar. Seperti yang dinyatakan dalam soalan asal, kecerunan linear yang digunakan untuk tujuan ini cenderung untuk mempamerkan tepi bergerigi disebabkan kelakuannya yang "berhenti keras".

Penyelesaian terletak pada mengubah suai peralihan warna dalam kecerunan. Dengan mengalihkan titik permulaan warna kedua sedikit dari titik penamat yang pertama, seseorang boleh memperkenalkan kesan kabur yang halus. Ini mengurangkan peralihan warna yang tajam dan menghasilkan garisan yang lebih licin.

Merujuk kod asal, ubah suai sifat kecerunan linear dengan cara berikut:

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

Dengan melaraskan hentian dan mula mata seperti yang ditunjukkan, peralihan warna menjadi kurang mendadak, meningkatkan kelancaran garisan pada dasar segi tiga. Perlu diingat bahawa resolusi ini mencapai keserasian dengan kebanyakan penyemak imbas moden tanpa menjejaskan responsif.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Garis Licin dengan Kecerunan Linear dalam Latar Belakang Segi Tiga?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!