يُنشئ التدرج الخطي حواف خشنة في صورة الخلفية: كيفية تنعيم الخط

في محاولة لإنشاء حافة سفلية مدببة على الصورة ، يمكن للمرء أن يختار إنتاج مثلثين مستجيبين في القاعدة. ومع ذلك، فإن تحقيق خط سلس في مثل هذا التصميم يمكن أن يكون أمرًا صعبًا. كما هو مذكور في السؤال الأصلي، يميل التدرج الخطي المستخدم لهذا الغرض إلى إظهار حواف خشنة بسبب سلوكه "الصعب التوقف".

يكمن الحل في تعديل انتقالات الألوان داخل التدرج. من خلال إزاحة نقطة البداية للون الثاني بعيدًا قليلاً عن نقطة النهاية للون الأول، يمكن للمرء تقديم تأثير تمويه دقيق. يؤدي هذا إلى تخفيف التحول اللوني الحاد وينتج عنه خط أكثر سلاسة.

بالرجوع إلى الكود الأصلي، قم بتعديل خاصية التدرج الخطي بالطريقة التالية:

.lefttriangle {
  ...
  background-image: linear-gradient(to right top, #ffffff 48%, transparent 50%);
}

.righttriangle {
  ...
  background: linear-gradient(to left top, #ffffff 48%, transparent 50%);
}

من خلال ضبط نقاط التوقف والبداية كما هو موضح، يصبح انتقال اللون أقل حدة، مما يعزز نعومة الخط عند قاعدة المثلث. ومن الجدير بالذكر أن هذا القرار يحقق التوافق مع معظم المتصفحات الحديثة دون المساس بالاستجابة.