Крест можно нарисовать псевдоэлементами шириной 75% и высотой 2px, повернув их на 45° и −45°. Круг задаётся равными сторонами кнопки и border-radius: 50%.
Верстка круглой кнопки закрытия с крестом
Крест можно нарисовать псевдоэлементами шириной 75% и высотой 2px, повернув их на 45° и −45°. Круг задаётся равными сторонами кнопки и border-radius: 50%.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Условие
Необходимо создать круглую кнопку закрытия, внутри которой будет расположен крест. Длина каждой линии крестика должна составлять три четверти (75 %) от ширины кнопки, а их толщина — 2 px. При изменении размеров кнопки (ширина и высота) линии должны автоматически сохранять эту пропорцию. Цвета элементов выбираются произвольно.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<img
src=""
alt="" />
</div>
<script src="/index.js" type="module"></script>
</body>
</html>
Ответ
Крест можно нарисовать псевдоэлементами шириной 75% и высотой 2px, повернув их на 45° и −45°. Круг задаётся равными сторонами кнопки и border-radius: 50%.
<button class="close-button" type="button" aria-label="Закрыть"></button>
.close-button {
position: relative; width: 48px; aspect-ratio: 1;
padding: 0; border: 0; border-radius: 50%;
color: #222; background: #eee; cursor: pointer;
}
.close-button::before, .close-button::after {
content: ''; position: absolute;
top: 50%; left: 50%; width: 75%; height: 2px;
background: currentColor;
transform: translate(-50%, -50%) rotate(45deg);
}
.close-button::after { transform: translate(-50%, -50%) rotate(-45deg); }
.close-button:focus-visible { outline: 2px solid blue; outline-offset: 3px; }
Меняя width, вы меняете также высоту через aspect-ratio и длину линий. Толщина остаётся 2px. Пустой img и лишний закрывающий div из шаблона следует удалить.