Створення довгих стрілок на чистому CSS

Привіт:) У цій замітці покажу як створити довгі стрілки на чистому CSS.

Використання SVG-іконок або шрифтів для простих елементів інтерфейсу не завжди є виправданим. Іноді набагато швидше та ефективніше реалізувати графічні елементи, як-от стрілки, за допомогою CSS. Це зменшує кількість запитів до сервера та дозволяє легко керувати кольором і розміром елемента.

Основна концепція

Стрілка складається з двох частин:

1. Наконечник: Створюється за допомогою квадрата з двома рамками (border-top та border-left), який повертається на потрібний кут.
2. Держак (лінія): Створюється за допомогою псевдоелемента ::after, який позиціонується та нахиляється так, щоб ідеально приєднатися до наконечника.

HTML-розмітка

Нам знадобляться два прості блоки:

<div class="long-arrow-left"></div>
<div class="long-arrow-right"></div>

CSS-стилізація

Ось повний код для створення стрілок для обох напрямків:

.long-arrow-right,
.long-arrow-left {
  display: block;
  margin: 30px auto;
  width: 25px;
  height: 25px;
  border-top: 2px solid #000;
  border-left: 2px solid #000;
}

/* Поворот для напрямку вліво */
.long-arrow-left {
 transform: rotate(-45deg);
}

/* Поворот для напрямку вправо */
.long-arrow-right {
 transform: rotate(135deg);
}

/* Створення "хвоста" стрілки */
.long-arrow-right::after,
.long-arrow-left::after {
  content: "";
  display: block;
  width: 2px;
  height: 45px;
  background-color: black;
  transform: rotate(-45deg) translate(15px, 4px);
  left: 0;
  top: 0;
}

до змісту ↑

Як це працює: розбираємо геометрію

1. Наконечник. Коли ми маємо квадрат із верхньою та лівою рамкою і повертаємо його на -45°, ці рамки утворюють кут, що вказує ліворуч. Для правої стрілки ми повертаємо його на 135°.
2. Лінія (::after). Це вузький прямокутник висотою 45px. Найскладніша частина тут — transform: rotate(-45deg) translate(15px, 4px);. Ми повертаємо лінію, щоб вона стала діагональною, і зміщуємо її (translate), щоб поєднати з вершиною кута.
3. Універсальність. Оскільки ми використовуємо чорний колір (#000 та black), стрілки виглядатимуть чітко на будь-якому світлому фоні.

до змісту ↑

Інші приклади та оптимізація

Використання змінних для швидкого налаштування

Щоб не змінювати колір у трьох різних місцях, краще використати CSS-змінні:

:root {
  --arrow-color: #2c3e50;
  --arrow-thickness: 2px;
}

.long-arrow-left, .long-arrow-right {
  border-top: var(--arrow-thickness) solid var(--arrow-color);
  border-left: var(--arrow-thickness) solid var(--arrow-color);
}

.long-arrow-left::after, .long-arrow-right::after {
  background-color: var(--arrow-color);
  width: var(--arrow-thickness);
}

Ефект при наведенні (Hover)

Додамо трохи інтерактивності, щоб стрілка "рухалася":

.long-arrow-left {
  transition: transform 0.3s ease;
}

.long-arrow-left:hover {
  transform: rotate(135deg) translateX(5px);
}

.long-arrow-right {
  transition: transform 0.3s ease;
}

.long-arrow-right:hover {
  transform: rotate(135deg) translateX(5px);
}

Висновок

Такі стрілки ідеально підходять для пагінації, кнопок "Назад/Вперед" або як декоративні вказівники в лонгрідах. Головна перевага цього методу — повний контроль над товщиною та довжиною ліній без необхідності редагувати графічні файли.