كيفية عمل خلفيات منحنية ومتداخلة في التصميم ؟

في أغلب الحالات التي يتم عمل فيها تصميم بهذا الشكل التي تحتوي على أشكال مموجة ومتداخلة ، تكون عبارة عن صورة صممت على الفوتوشوب  ونستخدمها بالتصميم لتوضع بشكل جمالي كما واضح في التصميم ، ويتم إعطائها كخلفية للوسم div أو الوسم الحاوي لجميع العناصر كما هو واضح في Header الموقع ،أو نقوم بوضع الصورة داخل div ونستخدم الخاصية z-index حتى تظهر كأعلى طبقة بين العناصر الأخرى 

z-index: 99;

ولو لاحظها صورة الأطباء في الأعلى يمكننا عمل الإنحناء الذي في الأسفل من خلال الخاصية border-radius في CSS كما يمكننا عمل الإنحاء من جميع الزوايا أو أحد الزوايا الأربعة وهكذا تكون ظهرت بشكل منحني. 

border-radius: 20px;

مبدئيا، هي صور تحوي يتم التحكم في حدودها وزواياها بشكل يجعلها تظهر بالشكل الذي هو عليه. ولكن يمكنك ايضا اضافة المزيد من الصور والطبقات والعناصر فوق الصورة والتأكد من جعلها تتموضع بشكل صحيح. قد تمتلك هاته الصور اجزاء شفافة بشكل ما يجعل ظهور الصورة الاخرى يظهر بشكل منحني او مائل او دائري.

فعلى سبيل المثال:

ليكن المكون banner على الشكل:

<div class="banner">
  <img width="200px" src="my-img.png" alt="text" />
  
  
</div>

لنضف طبقة جزء منها شفاف كـ:

<div class="banner">
  <img class="my-img" src="path/to/img" alt="text" />
  
  <img class="layer" src="path/to/layer">
</div>

ولنطبق التنسيقات التالية عليهما:

.banner{
  position: relative;
}

.banner .layer{
  position: absolute; /*جعل الطبقة تتموضع بشكل مطلق*/
  top: 0;
  right: 0;
  width: 100%;
}

تفحص المثال. 

ابحث عن layers png وستجد الكثير من الاشكال التي يمكن وضعها فوق صورة ما لتعطي ناتجا يظهر بشكل جميل.