Чтобы поставить стрелки по бокам, можно использовать псевдоэлементы ::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 свойств и псевдоэлементов, мы создаем стрелки по бокам контейнера.