**shape-outside** يُعرِّف شكل هندسي يلتف حوله النص — مثل المجلات التي تلتف النصوص حول الصور.
**يشترط:** - العنصر يجب أن يكون float (float: left أو float: right). - العنصر يجب أن يكون له عرض وارتفاع محددان.
**القيم:** - `circle(50%)` — التفاف دائري - `ellipse()` — إهليجي - `polygon()` — مضلع مخصص - `inset()` — مستطيل مع زوايا اختيارية - `url(image.png)` — يعتمد على شفافية الصورة
**shape-margin:** مسافة بين الشكل والنص الملتف حوله.
**shape-image-threshold:** عند استخدام صورة، تحدد قيمة alpha التي تُعتبر جزءاً من الشكل (0 إلى 1).
| 1 | /* نص يلتف حول دائرة */ |
| 2 | .avatar { |
| 3 | float: left; |
| 4 | width: 200px; |
| 5 | height: 200px; |
| 6 | shape-outside: circle(50%); |
| 7 | shape-margin: 20px; |
| 8 | border-radius: 50%; |
| 9 | margin-inline-end: 20px; |
| 10 | } |
مثال 1: نص يلتف حول صورة غير منتظمة
| 1 | /* التفاف حول صورة PNG شفافة */ |
| 2 | .hero-illustration { |
| 3 | float: right; |
| 4 | width: 300px; |
| 5 | shape-outside: url('/images/shape.png'); |
| 6 | shape-margin: 24px; |
| 7 | shape-image-threshold: 0.5; |
| 8 | margin-inline-start: 24px; |
| 9 | } |
| 10 | |
| 11 | /* مضلع مخصص */ |
| 12 | .diagonal-pull { |
| 13 | float: left; |
| 14 | width: 200px; |
| 15 | height: 300px; |
| 16 | shape-outside: polygon(0 0, 100% 0, 80% 100%, 0 100%); |
| 17 | shape-margin: 16px; |
| 18 | background: linear-gradient(to bottom right, #3b82f6, #8b5cf6); |
| 19 | clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%); |
| 20 | } |