Softonic

مولّد مثلثات CSS

خطوة 1 / 2
التالي

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

كيفية بناء مثلث الحدود

  1. 1

    اختر الاتجاه

    لأعلى أو لأسفل أو لليسار أو لليمين. يحدد الاتجاه الحدود التي تحصل على اللون وأي الحدود الثلاثة تظل شفافة.

  2. 2

    اضبط الحجم

    يتم استخدام قيمة الحجم لجميع عروض الحدود. المثلث الذي يبلغ حجمه 60 بكسل سيكون عرضه 120 بكسل (أو طويلًا، حسب الاتجاه).

  3. 3

    اختر لون التعبئة

    يدعم مدخل اللون قيم hex فقط (مثل `#10b981`)؛ ألوان rgb وrgba والألوان المسماة غير مدعومة. يتم تطبيق اللون فقط على حدود الجانب المقابل.

  4. 4

    انسخ قاعدة CSS

    الناتج عبارة عن مجموعة قواعد `.triangle { ... }` كاملة - قم بإفلاتها في ورقة الأنماط الخاصة بك وأضف `<div class="triangle"></div>` عند الحاجة.

لماذا تعمل خدعة الحدود

عندما يحتوي الصندوق على width: 0 وheight: 0، فإن حدوده الأربعة تلتقي عند نقطة مركزية واحدة. نظرًا لأن الحدود تكون بزاوية 45 درجة، فإن كل حدود تكون مثلثًا بالفعل - ثلاثة منها غير مرئية. اصنع حدًا واحدًا ملونًا وسترى هذا المثلث.

خريطة الاتجاه

الاتجاه الحدود المرئية حدود شفافة
لأعلى border-bottom border-left، border-right، border-top
أسفل border-top border-left، border-right، border-bottom
اليسار border-right border-top، border-bottom، border-left
اليمين border-left border-top، border-bottom، border-right

حساب الحجم

تشترك جميع الحدود الشفافة الثلاثة في قيمة الحجم. يستخدم الحد المرئي نفس الحجم. إذن مثلث مع size: 60:

  • العرض = 2 × 60 = 120 بكسل للمثلثات العلوية والسفلية
  • الارتفاع = 2 × 60 = 120 بكسل للمثلث الأيسر/الأيمن

إذا كنت بحاجة إلى مثلث غير متماثل (قاعدة أضيق ونقطة أطول)، فامنح الحدود الشفافة حجمًا واحدًا والحد المرئي حجمًا مختلفًا - على سبيل المثال، يعطي border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 40px solid red; مثلثًا علويًا طويلًا وضيقًا.

متى يجب الوصول إلى SVG بدلاً من ذلك

  • أنت بحاجة إلى نقاط متعددة، وليس ثلاث، استخدم <polygon>.
  • يجب أن يتغير حجم المثلث بسلاسة مع الأصل، استخدم viewBox وpreserveAspectRatio.
  • أنت تريد تعبئة متدرجة، أو حدًا، أو طرفًا مستديرًا - لا يمكن لحدود CSS القيام بأي من ذلك.

الأسئلة الشائعة

ليس مع الحدود وحدها - لا تقبل عروض الحدود % أو vw بأي طريقة مدعومة جيدًا. إذا كنت بحاجة إلى قياس السوائل، فانتقل إلى SVG <polygon> أو استخدم clip-path: polygon(...) على عنصر عادي.

لا يمكنك الالتفاف حول الزاوية حيث تلتقي الحدود. استخدم SVG بمسار محدد وstroke-linejoin: round، أو clip-path: polygon(...) مع filter: drop-shadow بسيط لإخفاء الحافة.

نعم، هذه هي حالة الاستخدام الأكثر شيوعًا. ضع المثلث تمامًا على حافة تلميح الأداة وقم بمطابقة لون التعبئة مع خلفية تلميح الأداة بحيث يُقرأ كفقاعة واحدة.

نعم. يتم إرسال الاتجاه والحجم واللون الذي تختاره إلى خادمنا مع طلب الصفحة ليتمكن من إنشاء CSS. في التدفق خطوة بخطوة، تُحمَل هذه القيم أيضًا في رابط الصفحة. ولا يتم تخزينها.

أدوات ذات صلة

مرجع جدول ASCII

جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.

مرجع أحرف HTML

قائمة قابلة للبحث بكيانات HTML، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.

مرجع اختصارات لوحة المفاتيح

ابحث في الاختصارات الافتراضية الموثقة لـ VS Code وChrome وBash مع GNU Readline على macOS وWindows وLinux.

عدّاد FPS

قِس معدل الإطارات FPS في المتصفح عبر requestAnimationFrame: تنعيم، وأدنى وأقصى معدل إطارات، وحد تنبيه، ورسم بياني اختياري. يعمل محليًا بلا رفع ملفات وبلا API.

منسق JSON

الصق JSON لتنسيقه بمسافتين أو أربع مسافات، أو تصغيره إلى ناتج مضغوط، أو فحص بنيته بسرعة قبل نسخ النتيجة.

مولد لوحة الألوان

أنشئ لوحات ألوان أحادية أو متجاورة أو مكملة أو ثلاثية أو رباعية من لون HEX أساسي، ثم صدّر متغيرات CSS جاهزة للنسخ.

الأداة متاحة بلغات أخرى