دالة polygon() في CSS

التعريف والاستخدام

CSS polygon() استخدام الدوال لتحديد مضلع.

polygon() استخدام الدوال مع clip-path خصائص و shape-outside استخدام الخصائص معًا.

مثال

مثال 1

قطع الصورة إلى مضلع:

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

تجربة شخصية

مثال 2

قطع الصورة إلى مضلع:

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

تجربة شخصية

مثال 3

استخدام polygon()،clip-path و shape-outside:

img {
  float: left;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

تجربة شخصية

اللغة CSS

polygon(fill-rule, length-percentage)
القيمة الوصف
fill-rule

اختياري. تحديد قاعدة التعبئة. يمكن أن تكون nonzero أو evenodd.

القيمة الافتراضية是非 صفرية.
length-percentage

مطلوب. تحديد النقاط التي تعريف المضلع. يمكن أن تكون أطوال أو قيمًا مئوية.

كل نقطة هي زوج من الإحداثيات x و y. 0 0 تعرف الزاوية العلوية اليسرى، 100% 100% تعرف الزاوية السفلية اليمنى.

تفاصيل التقنية

الإصدار: مستوى 1 لمodule CSS Shape

دعم المتصفح

الرقم في الجدول يمثل إصدار المتصفح الذي يدعم هذه الوظيفة لأول مرة.

Chrome Edge Firefox Safari Opera
37 79 54 10.1 24

الصفحات ذات الصلة

المرجع:خصائص clip-path

المرجع:خصائص shape-outside

المرجع:دالة circle()

المرجع:دالة ellipse()

المرجع:دالة inset()