تقطيع الخلفية css path

وعليكم السلام

يمكنك استخدام أدوات مساعدة مثل clippy أو species-in-pieces

أو يمكنك أن تختار من القيم الممكنة لهذه الخاصية.

مثالاً هذا كود رسم مثلث

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

وهذا للمعين

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

وهذا لشبه المنحرف

clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);

ويمكنك التعديل على القيم أو إضافة قيم جديدة في الpolygon لتحديد عدد الزواية ودرجة الانحناء وغيرها.

وكما يمكنك أن تشطب من الزوايا في كود مثل

clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);

لكنني أفضّل لك أن تستخدم الأدوات الجاهزة لتقليل العبء وعدم هدر الوقت

تستطيع إستعمال خاصية clip-path في css لصنع أشكال معقدة فضلاً عن الأشكال البسيطة التي تصنعها من خلال circle مثلاً.

المثال التالي يصنع شكل سهم الى اليسار وتلاحظ هنا أننا أستخدمنا polygan لإنجاز الشكل المطلوب. 

	clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
	

الحل البديل حتى تتمكن من إستعمال path تحتاج أن تستخدم clipPath داخل svg وربطها بالصورة التي تريد قصها من خلال css كما في المثال التالي:

	...
	<style>
	img {
	  clip-path: url(#svgClipPathID)
	}
	</style>
	...
	<img  src="image.jpg" width="100" height="140">
	<svg viewBox="0 0 100 100">
	  <clipPath id="svgClipPathID">
	      <path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />
	  </clipPath>
	</svg>
	

يقوم الكود أعلاه بقص أي صورة تضعها على شكل قلب. من خلال path تستطيع إنشاء التأثير المرغوب به.