خاصية Clip-path
آخر تحديث: 2026-09-13
clip-path خاصية Clip-path
تقصّ خاصية clip-path العنصر إلى شكل هندسي محدد — مثل الدائرة أو المضلّع أو القطع الناقص — بحيث يُعرض الجزء الداخل للشكل فقط ويُخفى كل ما هو خارجه. على عكس القص المستطيل التقليدي في overflow: hidden، ينشئ clip-path مناطق مرئية بأي شكل، مما يجعله أداة قوية للتخطيطات الإبداعية والتأثيرات البصرية.
| الفئة | |
|---|---|
| القيمة الأولية | none |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
clip-path: none | <clip-source> | <basic-shape> | <geometry-box>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
none | كلمة مفتاحية | بدون قص |
<clip-source> | <basic-shape> | <geometry-box> | القيمة | مسار القص |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| clip-path | ✓ v55 | ✓ v79 | ✓ v3.5 | ✓ v9.1 | ✓ v42 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： تُعد polygon() دالة القص الأكثر مرونة ويمكنها تعريف أي مضلّع؛ وتُنتج أدوات التوليد عبر الإنترنت مثل Clippy الإحداثيات بسرعة.
تحذير： يقص clip-path كلًا من محتوى العنصر ومنطقته التفاعلية؛ فالأجزاء المقصوصة لا يمكنها الاستجابة لأحداث الماوس.
❓ الأسئلة الشائعة
Qما الفرق بين خاصيتي clip-path و mask في CSS؟
Aclip-path قص صلب: يُبقي فقط المنطقة داخل مسار القص، وكل ما هو خارجها غير مرئي تماماً ولا يستجيب للأحداث، بحافة حادة. أما mask فهي قناع قائم على قناة ألفا يدعم التدرّجات شبه الشفافة، فيمكنك تحقيق حواف ناعمة متلاشية. استخدم clip-path للأشكال الهندسية، واستخدم mask عند الرغبة في انتقالات سلسة باستخدام الصور أو التدرّجات.
Qهل يمكن تحريك خاصية clip-path باستخدام انتقالات أو إطارات CSS؟
Aنعم، بشرطين: أن تكون دوال الحالتين من نفس النوع ولها نفس عدد الرؤوس — على سبيل المثال، استدعاءان من polygon() كل منهما بأربعة رؤوس، أو circle() ينتقل إلى دائرة أكبر. هذه تدعم transition و animation. إذا اختلف عدد الرؤوس (مثل مثلث إلى خماسي)، يستحيل الاستيفاء؛ وتحتاج أولاً إلى مواءمة كلتيهما لنفس العدد.
Qكيف أقصّ عنصراً على شكل دائرة أو مضلّع، وكيف تعمل الإحداثيات؟
Aينشئ circle(50%) دائرة، ويمكنك إضافة at لتحديد المركز، مثل circle(50% at 30% 40%). أمّا polygon() فيعرّف الرؤوس بإحداثيات نسبة مئوية — polygon(50% 0%, 100% 100%, 0% 100%) مثلث — وكل الإحداثيات نسبة إلى عرض العنصر وارتفاعه نفسه. استخدم أداة بصرية مثل Clippy لسحب الإحداثيات وتوليدها ثم ضبطها بدقة.
Qهل يؤثر clip-path على منطقة النقر واختبار التصادم (hit-test) للعنصر؟
Aنعم. المنطقة المقصوصة ليست غير مرئية فحسب، بل لا تستجيب أيضاً لأحداث الماوس — وتتبع منطقة اختبار التصادم (hit-test) للعنصر الشكل المقصوص. يمكنك استخدام ذلك للتحكم بدقة في المنطقة القابلة للنقر، ولكنه يعني أيضاً أنه لا يمكن وضع عناصر تفاعلية في الأجزاء المقصوصة. إذا كنت تريد فقط إخفاء الشكل البصري مع إبقاء منطقة النقر، استخدم mask أو visibility بدلاً من ذلك.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
