مولّد مثلث CSS

كيف يعمل؟

تعتمد الخدعة على أن أي عنصر بلا عرض أو ارتفاع، وله حدود سميكة، تظهر حدوده ملتقية في نقطة مدببة. بجعل حدّين شفافين وتلوين الحد الثالث، نحصل على مثلث يشير إلى الاتجاه المطلوب — دون الحاجة إلى صورة أو SVG لسهم تلميح أو مؤشر زخرفي.

لماذا استخدام هذه الخدعة بدلًا من صورة؟

مثلث CSS خالص لا يتطلب أي طلب شبكة، ويمكن تغيير حجمه بسهولة، ويتغير لونه فورًا عبر متغير CSS، على عكس الصور النقطية أو حتى SVG خارجي.

هل يمكنني تحريك لون المثلث أو حجمه؟

نعم، بما أنها خصائص CSS قياسية (border-color, border-width)، يمكن تطبيق انتقالات أو حركات عليها باستخدام transition أو @keyframes مثل أي خاصية CSS أخرى.

معالجة محلية 100%: يتم إنشاء الكود بالكامل داخل متصفحك عبر WebAssembly.