إنشاء لافتة تحتوي على 5 صور متماثلة مفصولة بخطوط قطرية

محاكاة صورة بانر متماثلة

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

حل مبسط

بدلاً من الاعتماد على عناصر تحديد الموضع، اعتمد المستخدم نهجًا أكثر وضوحًا باستخدام Flexbox . من خلال إنشاء حاوية تحتوي على خمسة عناصر Flexbox وتطبيق تحويلات الانحراف على كل مربع، تم تحقيق التأثير المطلوب دون الحاجة إلى تحديد موضع معقد.

يوضح المقتطف التالي كيفية إنشاء ترتيب الصور المتماثل هذا:

.container {
  display: flex;
  height: 150px;
  margin: 0 30px;
}

.box {
  flex: 1;
  border: 1px solid;
  transform: skew(-25deg);
  position: relative;
  overflow: hidden;
}

.box:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  right: -50%;
  transform: skew(25deg);
  background-image: var(--i);
  background-position: center;
}