Как сделать крестик в css

Вы можете создать крестик в CSS с помощью псевдоэлементов ::before и ::after и установив свойства content: ""position: absolute и transform для поворота псевдоэлементов на 45 градусов.

Например, следующий код создаст крестик размером 20х20 пикселей:

HTML:

<div class="cross"></div>

CSS:

.cross {
  width: 20px;
  height: 20px;
  position: relative;
}

.cross::before, .cross::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: black;
  top: 50%;
}

.cross::before {
  transform: rotate(45deg);
}

.cross::after {
  transform: rotate(-45deg);
}

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

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как сделать крестик в css

Наш специалист свяжется с вами в ближайшее время и уточнит детали