لنفترض أن لدينا هده الصورة و نريد أخد جزء معين منها



بداية علينا تحديد شكل الجزء اللدي نريد أخده / قطعه من الصورة

1 ) المربع / المستطيل



لأخد جزء مربع / مستطيل من الصورة ينبغي تحديده عن طريق 4 حدود :
-  نسبة الإقتطاع من الأعلى
- نسبة الإقتطاع من اليمين
- نسبة الإقتطاع من الأسفل
- نسبة الإقتطاع من اليسار




و تكتب هده النسب بنفس ترتيبها أعلاه ( إنطلاقا من الأعلى و في إتجاه عقارب الساعة )
كالتالي في توصيف css الخاص بالصورة

clip-path: inset(15% 10% 30% 25%);

النتيجة :

------------------


يمكن إستبدال النسب المئوية بالبكسلات :

clip-path: inset(30px 40px 30px 12px);

2 ) الدائرة

لتحديد دائرة داخل الصورة سنحدد مركزها و شعاعها و دالك عن طريق النسب المئوية أو البكسل




الكود :

    clip-path: circle(16% at 36% 50%);

 النتيجة :



---------

3 ) القرص
يختلف القرص عن الدائرة بإمكانية تحديد قيمتين للشعاع : الطول و العرض


مثال :



الكود :

clip-path: ellipse(33% 21% at 36% 50%);

النتيجة





----------------


4 ) مسارات القطع

قد ترغب بقطع العنصر بشكل هندسي آخر كهدا مثلا




في هده الحالة لن تحتاج لأكثر من تحديد مسار / موضع النقط على الصورة بهدا الشكل





تم نرتب القيم كالتالي

clip-path: polygon(27% 21%, 54% 32%, 62% 48%, 54% 70%, 29% 81%, 17% 56%);

النتيجة :




----------

يمكن إنشاء أشكال هندسية بأي عدد من النقاط / الأضلاع


مثال :


-------------


يمكنك الإستعانة بهدا الموقع للحصول على مسارات القطع بسهولة

https://bennettfeely.com/clippy/




---------------------

يمكن جعل القطع متحركا و دلك بإستخدام الأنميشن اللتي رأيناها في درس سابق

شرح الأنميشن animation في لغة الأنماط الإنسيابية css




------------------


5 ) القطع بإستخدام المتجهات

الأشكال الهندسية لا تتوقف في ما دكر سابقا فهناك المتجهات الهندسية

مثال



في هده الحالة ستحتاج لمعرفة مسبقة بإستخدام برامج رسم المتجهات






برامج رسم المتجهات كثيرة منها adobe Illustrator و اللدي أعتقد أنه الأفضل في هدا المجال




كما توجد عدة بدائل مجانية و خفيفة للمبتدئين كبرنامج figma


لتحميل برنامج figma

https://www.figma.com/downloads/

كما توجد أدوات أخرى لرسم المتجهات عبر المتصفح دون الحاجة لتنزيل البرنامج ك :

https://editor.method.ac/
https://boxy-svg.com/


إفتح عمل جديد بنفس أبعاد الصورة اللتي تريد عمل قص لها



و إبدأ برسم المتجهة بإستخدام أدوات البرنامج



يمكن رسم أكتر من متجهة في العمل الواحد

إستمر برسم المتجهات حتى تحصل على الشكل المطلوب




تم قم بحفظ العمل بصيغة svg




إفتح ملف svg اللدي قمت بحفظه بإستخدام محرر النصوص و إبحت عن وسوم path




هده الوسوم هي تحوي رموز المتجهات اللتي قمت برسمها و يمكن إستخدامها للإقتطاع من الصورة كالتالي





1 - أبعاد مسار القطع ( يجب أن يكون مطابقا لأبعاد الصورة )
2 - معرف القطع
3 - ضع وسوم path اللتي حصلت عليها من برنامج رسم المتجهات هنا
4 - مسار / رابط الصورة


الكود :

<svg viewBox="0 0 420 300" height="300px" width="420px">
<defs>
<clipPath id="clip">

ضع الوسوم هنا


</clipPath>
</defs>

------


مثال على العمل بعد الإضافات




-----------