Коротко: «крестик» делают двумя линиями под ±45°. Есть два надёжных способа — псевдоэлементы CSS или SVG. Первый — без картинок, второй — гибкий и точный по форме.
Способ 1: CSS-линиями (без картинок)
Рисуем две линии через ::before и ::after, поворачиваем на 45° и −45°.
.close {
position: relative; /* точка отсчёта для линий */
width: 40px; height: 40px;
background: transparent; border: 0; cursor: pointer;
}
.close::before,
.close::after {
content: '';
position: absolute;
top: 50%; left: 8px;
width: 24px; height: 2px;
background: #1a1a1a;
border-radius: 2px;
}
.close::before { transform: translateY(-50%) rotate(45deg); }
.close::after { transform: translateY(-50%) rotate(-45deg); }<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
<path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>Цвет идёт от текста через currentColor; форма точная и одинаково выглядит во всех браузерах.
.close::before, .close::after { transition: transform .25s ease; }
.close:hover::before { transform: translateY(-50%) rotate(45deg) scale(1.1); }
.close:hover::after { transform: translateY(-50%) rotate(-45deg) scale(1.1); }Практика: три задачи
1. Кнопка «закрыть» в модальном окне
- Создайте кнопку и задайте ей размеры (не меньше 40×40).
- Добавьте
position: relative. - Нарисуйте крестик через псевдоэлементы или вставьте SVG.
- Добавьте
aria-label="Закрыть".
2. «Плюс → крестик» в аккордеоне
.plus { position: relative; width: 20px; height: 20px; }
.plus::before, .plus::after { content:''; position:absolute; background:#003F8F; border-radius:2px; }
.plus::before { top:9px; left:2px; width:16px; height:2px; }
.plus::after { left:9px; top:2px; width:2px; height:16px; transition: transform .25s; }
.is-open .plus::after { transform: rotate(90deg); } /* минус */Для крестика: .is-open .plus { transform: rotate(45deg); }.
3. Крестик на тёмном фоне
.close--light::before, .close--light::after { background: #fff; }top: 50% и transform: translateY(-50%). Тогда линии пересекаются ровно в центре кнопки.Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Крестик смещён | линии без центрирования | top:50% + translateY(-50%) |
| Ничего не видно | нет content |
добавить content:'' |
| Кнопка не кликается | нулевой размер | задать width/height |
| Недоступно для скринридера | нет подписи | aria-label |
Проверьте себя
Вопросы и ответы
Иконки и сложные формы — SVG (точно и адаптивно). Простые крестики можно и на CSS — без лишних файлов.
Кнопке: border-radius: 50%, border: 2px solid, flex-центрирование, внутри — сам крестик.
Из-за поворота без transform-origin или смещения. Центрируйте через translateY(-50%) и одинаковую ширину.
Используйте <button> (не div) и добавьте видимый фокус через :focus-visible.
Итоги
- Крестик = две линии под ±45° (CSS) или SVG.
- Обязательно
content:''у псевдоэлементов. - Центрируйте линии, задавайте размеры и
aria-label.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.