Как сделать стрелочку в html

Question

Aleksey · Accepted Answer

Для создания стрелки в HTML можно использовать символы юникода или же создать ее с помощью CSS.

1. Использование символов юникода:

Стрелки, как и многие другие символы, имеют свои коды в таблице символов Unicode. Например, стрелка вправо — это символ с кодом `U+2192`. Чтобы добавить этот символ на страницу, нужно использовать соответствующий HTML-код: `&#8594;`, где `8594` — это шестнадцатеричное представление кода символа.

2. Создание стрелки с помощью CSS:

Для создания стрелки с помощью CSS можно использовать псевдоэлемент `::after` и свойства `content`, `border` и `transform`. Например, чтобы создать стрелку вправо, можно использовать следующий CSS-код:

```
.arrow-right {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid black;
}

.arrow-right::after {
  content: "";
  display: block;
  position: absolute;
  top: -10px;
  left: 10px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid white;
  transform: translateX(1px);
}
```

Этот код создаст стрелку вправо, которая будет состоять из треугольника с черной левой границей и белой правой границей, а также из белого треугольника сдвинутого на 1 пиксель вправо.

Чёрный Волк · Answer

.arrow-right {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid black;
}

.arrow-right::after {
  content: "";
  display: block;
  position: absolute;
  top: -10px;
  left: 10px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid white;
  transform: translateX(1px);
}

Как сделать стрелочку в html

Ответы

Каталог