إنشاء مثلث متساوي الأضلاع مع صورة خلفية في CSS
Title: هل من الممكن إنشاء مثلث متساوي الأضلاع ومتجاوب مع الشاشة مع صورة خلفية في CSS؟ ويجب أيضًا أن يعمل في IE11.
الجسم:
لقد حاولت:
-
استخدام التقنيات العادية لإنشاء المثلثات باستخدام الحدود – فشل، لا توجد صورة خلفية.
-
clip-path – فشل، لا دعم من IE (لعنة).
-
المثلثات باستخدام الانحناء والتحويل لها صراع بين الحصول على طول يعتمد على النسبة المئوية الصحيحة. بعد حوالي 3 ساعات من المحاولة لم أنجح في حل المشكلة.
آخر جهد يائس سأقوم به ربما سيكون إنشاء قناع SVG به مثلث مقطوع فيه ووضعه فوق الـ
وبالطبع، ليس من رغبتي أن أعقد حياتي كثيرًا بهذا القدر، إنه مهمة اختبار تلقيتها، ولقد أنفقت يومًا كاملًا من الوقت، وكمية هائلة من الأعصاب. من فضلك ساعدني!
المزيد من المعلومات
للأسف، لا يمكن إنشاء مثلث متساوي الأضلاع ومتجاوب مع الشاشة ويحتوي على صورة خلفية في CSS بدون استخدام حيل أو حلول غير مباشرة. تقنيات CSS القياسية لا تدعم هذه العملية مباشرة، وبعض التقنيات الأخرى مثل clip-path والتحويلات والانحناءات ليست داعمة بشكل كامل في جميع المتصفحات، بما في ذلك IE11.
الحل الوحيد الذي يمكن أن يكون فعالا ويعمل في IE11 هو استخدام SVG كمقناع للصورة الخلفية. يمكنك إنشاء مثلث داخل SVG واستخدامه كمقناع للصورة الخلفية داخل عنصر