أمثلة حول كيفية إنشاء أشكال مختلفة من المثلثات بــ css

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

1. مثلثات مع اطار

   	.arrow1 { display: inline-block; border: 30px solid transparent; border-bottom: 30px solid orange; position: relative; } .arrow1:after { content: ''; display: inline-block; position: absolute; top: -24px; left: -26px; border: 26px solid transparent; border-bottom: 26px solid #fff; }
   	.arrow { display: inline-block; border: 30px solid transparent; border-top: 30px solid orange; position: relative; } .arrow:after { content: ''; display: inline-block; position: absolute; top: -28px; left: -26px; border: 26px solid transparent; border-top: 26px solid #fff; }
   	.arrow { display: inline-block; border: 30px solid transparent; border-right: 30px solid orange; position: relative; } .arrow:after { content: ''; display: inline-block; position: absolute; top: -26px; left: -24px; border: 26px solid transparent; border-right: 26px solid #fff; }
   	.arrow { display: inline-block; border: 30px solid transparent; border-left: 30px solid orange; position: relative; } .arrow:after { content: ''; display: inline-block; position: absolute; top: -26px; left: -28px; border: 26px solid transparent; border-left: 26px solid #fff; }
   	.arrow { display: inline-block; border-top: 40px solid orange; border-right: 40px solid transparent; position: relative; } .arrow:after { content: ''; display: inline-block; position: absolute; top: -38px; left: 2px; border-top: 33px solid #fff; border-right: 33px solid transparent; }
   	.arrow { display: inline-block; border-top: 40px solid orange; border-left: 40px solid transparent; position: relative; } .arrow:after { content: ''; display: inline-block; position: absolute; top: -38px; left: -35px; border-top: 33px solid #fff; border-left: 33px solid transparent; }
   	.arrow { display: inline-block; border-bottom: 40px solid orange; border-left: 40px solid transparent; position: relative; } .arrow:after { content: ''; display: inline-block; position: absolute; top: 5px; left: -35px; border-bottom: 33px solid #fff; border-left: 33px solid transparent; }
   	.arrow { display: inline-block; border-bottom: 40px solid orange; border-right: 40px solid transparent; position: relative; } .arrow:after { content: ''; display: inline-block; position: absolute; top: 5px; left: 2px; border-bottom: 33px solid #fff; border-right: 33px solid transparent; }

2. مثلثات مظللة

   	span { display: inline-block; border: 30px solid transparent; border-bottom: 30px solid orange; }
   	span { display: inline-block; border: 30px solid transparent; border-top: 30px solid orange; }
   	span { display: inline-block; border: 30px solid transparent; border-right: 30px solid orange; }
   	span { display: inline-block; border: 30px solid transparent; border-left: 30px solid orange; }
   	span { display: inline-block; border-top: 40px solid orange; border-right: 40px solid transparent; }
   	span { display: inline-block; border-top: 40px solid orange; border-left: 40px solid transparent; }
   	span { display: inline-block; border-bottom: 40px solid orange; border-left: 40px solid transparent; }
   	span { display: inline-block; border-bottom: 40px solid orange; border-right: 40px solid transparent; }