Как поставить стрелки по бокам?

Чтобы поставить стрелки по бокам, можно использовать псевдоэлементы ::before и ::after в сочетании с CSS свойствами content и border. Давайте рассмотрим пример:

HTML:

<div class="container">
  <div class="arrow-left"></div>
  <div class="content">Содержимое</div>
  <div class="arrow-right"></div>
</div>

CSS:

.container {
  position: relative;
  display: flex;
  align-items: center;
}

.arrow-left,
.arrow-right {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid #000;
  background: #fff;
}

.arrow-left::before,
.arrow-left::after,
.arrow-right::before,
.arrow-right::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 2px;
  background: #000;
}

.arrow-left::before,
.arrow-right::before {
  transform: rotate(45deg);
}

.arrow-left::after,
.arrow-right::after {
  transform: rotate(-45deg);
}

.arrow-left {
  left: 0;
}

.arrow-right {
  right: 0;
}

В этом примере мы создаем контейнер .container, в котором находятся стрелки и содержимое. С помощью позиционирования относительно (position: relative;) и абсолютно (position: absolute;), мы располагаем стрелки по бокам контейнера.

Каждая стрелка имеет ширину (width: 20px;), высоту (height: 20px;), границу (border: 2px solid #000;) и фон (background: #fff;). Также мы добавляем псевдоэлементы ::before и ::after, чтобы создать форму стрелки с помощью горизонтальной и вертикальной линий.

Псевдоэлементы ::before и ::after имеют ширину (width: 8px;), высоту (height: 2px;) и фон (background: #000;). С помощью свойства content: ""; мы указываем, что псевдоэлементы должны содержать некоторое содержимое, даже если оно невидимо.

Используя свойство transform: rotate(45deg);, мы поворачиваем псевдоэлементы ::before и ::after на 45 градусов, чтобы создать форму стрелки.

Наконец, мы располагаем стрелку слева (left: 0;) и стрелку справа (right: 0;) с помощью свойств left и right с положением absolute.

Таким образом, с использованием CSS свойств и псевдоэлементов, мы создаем стрелки по бокам контейнера.