إنشاء مثلث شفاف بحدود باستخدام CSS

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

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

نعم، هناك! يتضمن النهج الحصري لمجموعة الويب الاستفادة من حرف Unicode U 25B6 (▲). وإليك الطريقة:

.triangle {
  -webkit-text-stroke: 12px black;
  color: transparent;
  font-size: 200px;
}

▲

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

على الرغم من أن هذا الحل خاص بمتصفحات webkit، إلا أنه يوفر طريقة موجزة ومذهلة بصريًا لعرض مثلث شفاف مع حدود.