كيفية إنشاء: سهم CSS

كيفية إنشاء السهم

الخطوة الأولى - إضافة HTML:

<p>سهم اليمين: <i class="arrow right"></i></p>
<p>سهم اليسار: <i class="arrow left"></i></p>
<p>سهم الصعود: <i class="arrow up"></i></p>
<p>سهم السقوط: <i class="arrow down"></i></p>

الخطوة الثانية - إضافة CSS:

.arrow {
  حاجز: سوداء صلبة;
  عرض-حاجز: 0 3سم 3سم 0;
  عرض: داخلية-كتلة;
  ملء: 3سم;
}
.right {
  تحويل: تدوير(-45درجة);
  -webkit-تحويل: تدوير(-45درجة);
}
.left {
  تحويل: تدوير(135درجة);
  -webkit-تحويل: تدوير(135درجة);
}
.up {
  تحويل: تدوير(-135درجة);
  -webkit-تحويل: تدوير(-135درجة);
}
.down {
  تحويل: تدوير(45درجة);
  -webkit-transform: rotate(45deg);
}

جرب بنفسك