مولد المثلث CSS

قم بإنشاء مثلثات CSS باستخدام خدعة الحدود الكلاسيكية. قم بتعيين الاتجاه والحجم واللون، ثم انسخ المقتطف.

CSS Triangle Generator

Live

Direction

Size60px

Color

CSS output

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 60px solid #e11d48;

Text / on-page input

تعمل مولدات الألوان وCSS بالكامل في متصفحك. لا تقوم المعاينات والتحويلات أبدًا بتحميل أنماطك.

استخدم CSS Triangle Generator متى شئت: قم بإنشاء مثلثات CSS باستخدام حيل الحدود - الاتجاه والحجم واللون.

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

لا. يتم تشغيل المولدات والمحولات في متصفحك من خلال المعاينة المباشرة.

لا، افتح الأداة، وقم بتعديل عناصر التحكم، وانسخ ملف CSS.

Build polygon and shape clip-paths with an interactive preview.

Control each corner independently and preview rounded shapes with copy-ready CSS.

Design layered box-shadows with offset, blur, spread, and color — live preview included.