كيف أصمم شكل مزركش بـ CSS؟

محمد بوسكوري · 12 فبراير 2016

بعد بعض المحاولات في تصميم شكل مزركش باستعمال تقنية css، حصلت على :

لكن المشكل هو أن هذا الكود يحتوي على moz- والتي عند حذفها يتغير الشكل كليا، فكيف أحصل على نفس النتيجة باستعمال linear-gradient؟

هذا هو الكود:

body {
  background-image:
  linear-gradient(45deg, #808080 25%, transparent 25%), 
  linear-gradient(-45deg, #808080 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #808080 75%),
  linear-gradient(-45deg, transparent 75%, #808080 75%);

  background-size:20px 20px;    
  background-position:0 0, 10px 0, 10px -10px, 0px 10px;
}

E.Nourddine · 15 فبراير 2016

فقط عليك تغيير background-position، بإعطاء هذه الخاصية عدة قيم بوحدة البكسل، بهذا الشكل:

body {
  background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}