كيف أتحكم في شكل لون الخلفية ؟

مرحباً @عبد الواحد الحدادي
يُمكنك إستخدام الخاصية clip-path لعمل هذه الأشكال و غيرها و هذه بعض الأمثلة على CodePen:

كما يُمكنك الإطلاع على هذا المقال سيُفيدك أيضاً:

بالتوفيق

يتم عمل هكذا خلفية باستخدام CSS:

عن طريق الدالة التالية:

• angel : يأخذ الزاوية التي ترغب بقص الخلفية بها
• color1 : اللون الأول ومن ثم (اختياري) نضع النسبة التي تدل على تشبع اللون
• color2 : اللون الثاني ومن ثم (اختياري) نضع النسبة التي تدل على تشبع اللون

background: linear-gradient(<angle>, color1 color1-stop-at, color2 color2-start-at);

مثال:

background: linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);

و الصورة المرفقة توضح النتيجة:

ملاحظة: قم بتعديل الزاوية وقيم الألوان بما تجده مناسبا.

يجب عليك الدخول الى ملف style الخاص بالمشروع والبحث عن اسم class او العنصر المعطى للdiv 

كيف تعرف اسم class ؟

عن طريق عمل inspect على العنصر سوف تجد هذا الشكل.

فمثلأ هنا أسم الكلاس body-head سوف نغير له لون الخلفية هذا في ملف css هكذا :

.body-head{
	background-color: red /*لون الذى تريده*/ ;
}

وإذا تريد التحكم فى شكل الخلفية ورسمها هذه المقالة سوف تفيد حضرتك كثيراً هنا.

بتاريخ 8 دقائق مضت قال Walid Mohamed2:

يجب عليك الدخول الى ملف style الخاص بالمشروع والبحث عن اسم class او العنصر المعطى للdiv 

كيف تعرف اسم class ؟

عن طريق عمل inspect على العنصر سوف تجد هذا الشكل.

فمثلأ هنا أسم الكلاس body-head سوف نغير له لون الخلفية هذا في ملف css هكذا :

.body-head{
	background-color: red /*لون الذى تريده*/ ;
}

وإذا تريد التحكم فى شكل الخلفية ورسمها هذه المقالة سوف تفيد حضرتك كثيراً هنا.

بارك الله فيك أستاذي استفدت منك كثيراً 

بتاريخ 23 دقائق مضت قال عبود سمير:

مرحباً @عبد الواحد الحدادي
يُمكنك إستخدام الخاصية clip-path لعمل هذه الأشكال و غيرها و هذه بعض الأمثلة على CodePen:

 

 

كما يُمكنك الإطلاع على هذا المقال سيُفيدك أيضاً:

بالتوفيق

شكرا لك أستاذي، 

استفدت من شرحك كثيراً .

بتاريخ 22 دقائق مضت قال Wael Aljamal:

يتم عمل هكذا خلفية باستخدام CSS:

عن طريق الدالة التالية:

• angel : يأخذ الزاوية التي ترغب بقص الخلفية بها
• color1 : اللون الأول ومن ثم (اختياري) نضع النسبة التي تدل على تشبع اللون
• color2 : اللون الثاني ومن ثم (اختياري) نضع النسبة التي تدل على تشبع اللون

background: linear-gradient(<angle>, color1 color1-stop-at, color2 color2-start-at);

مثال:

background: linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);

و الصورة المرفقة توضح النتيجة:

ملاحظة: قم بتعديل الزاوية وقيم الألوان بما تجده مناسبا.

شكرا جزيلا لك أستاذي

على هذا الشرح البسيط استفدت منك كثيراً.

بكل بساطة، هذه تكون عبارة عن div ويأخذ إعدادت معينة و يتم وضع له لون، أي أنه لا يوجد خاصية تمثل لك مثل هذه الرسومات في الخلفية.
هناك ما يسمى بالـ CSS Shapes، سأضع لك مثال و بناءًا عليه تستطيع القيام بإعدادات خاصة و تلبي طلبك في التصميم .

• لعمل مربع ملون :

#square {
    background: lightblue;
    width: 100px;
    height: 100px;
}

• لعمل دائرة ملونة :

#circle {
    background: lightblue;
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

• لعمل مثلث ملون :

#triangle {
     width: 0;
     height: 0;
     border-top: 40px solid transparent;
     border-right: 80px solid lightblue;
     border-bottom: 40px solid transparent;
 }

• هناك أيضًا ما يسمى بالـ shape-outside ، ولها عدة خيارات:

1. inset() : تستخدم لإنشاء مربع أو مستطيل مع إمكانية تحديد القيم لمدى تداخلها مع النص.

#square {
     float: left;
     width: 100px;
     height: 100px;
     shape-outside: inset(20px 5px 30px 10px);
     background: lightblue;
 }

هنا نجد أننا رسمنا مربع ملون و تم وضعه خلف الكلام.

2. circle() : تستخدم لرسم دائرة.

 #circle {
      float: left;
      width: 150px;
      height: 150px;
      margin: 20px;
      shape-outside: circle(50% at 30%);
      clip-path: circle(50% at 0%);
      background: lightblue;
    }

للمزيد من الخيارات بإمكانك الإطلاع على الموقع هنا.

بالتوفيق.

بتاريخ منذ ساعة مضت قال عبد الواحد الحدادي:

مرحباً بكم أعزائي؛ 

أريد أن أعرف من فضلكم كيف أتحكم في شكل لون الخلفية، في الصورة المرفقة ( الطبقة الحمراء ) أريد فعل مثل ذلك . 

أتمنى أن يكون سؤالي واضح لكم، وبارك الله فيكم إخواني .

مرحبا عبد الواحد.

يوجد العديد من الطرق التي تمكنك من القيام بذلك ربما أبسطها هو استخدام صورة خلفية كما يلي:

و من الطرق الأخرى ما يلي:

• SVG كما في المثال التالي: يمكنك في التفكير في ال SVG على أنها صور و لكنها تعتبر أفضل من صور jpeg. حيث أنها تحافظ على جودتها في مقاسات الشاشة المختلفة "لا تتشتت"
• الخاصية clip-path في css 

يوجد العديد من المواقع التي يمكنك استخدامها لتوليد هذه الأشكال ولصق الأكواد في مشروعك مثل هذا الموقع على سبيل المثال.

• يمكنك كذلك استخدال الخاصية. transform:skew في css 

يمكنك قراءة هذا  المقال  لمزيد من المعلومات و الشرح عن الفروق بين هذه الطرق.

بالتوفيق.