Как сделать фигуру наковальня в CSS с прозрачными кругами
В веб-дизайне часто требуется создать сложные фигуры, которые выходят за рамки простых квадратов и кругов. Одна из таких фигур - «наковальня», которая представляет собой прямоугольник со скруглёнными боками и вырезанными полукруглыми областями. В этой статье мы разберём, как реализовать такую фигуру с прозрачными кругами (синими на примере), чтобы задний фон просвечивал, и обеспечим поддержку Safari 13.
Что такое фигура наковальня и зачем она нужна
Фигура «наковальня» часто используется в интерфейсах для создания уникальных форм кнопок, блоков, иллюстраций или элементов декора. Она состоит из центрального прямоугольника с закруглёнными краями и боковых вырезов, которые имитируют форму наковальни. В нашем примере синие круги - это вспомогательные элементы, показывающие, как обрезается фигура. Они должны быть прозрачными, чтобы через них был виден фон (серый, картинка или любой другой).
Исходный код и его модификация
Взяв за основу пример на CodePen, нам нужно изменить поведение синих кругов: сделать их прозрачными, но при этом сохранить форму красной фигуры. Для этого мы используем CSS-свойство clip-path или комбинацию mask с SVG. Однако для поддержки Safari 13 лучше применять mask-image с вендорным префиксом -webkit-.
Решение с использованием mask-image
Создадим SVG-маску, которая содержит два круга (прозрачные области) и прямоугольник со скруглёнными углами. Затем применим её к элементу с помощью mask-image.
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Фигура наковальня</title>
<style>
.anvil {
width: 400px;
height: 200px;
background: red;
border-radius: 20px;
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"><rect width="400" height="200" rx="20" fill="white"/><circle cx="50" cy="100" r="60" fill="black"/><circle cx="350" cy="100" r="60" fill="black"/></svg>');
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"><rect width="400" height="200" rx="20" fill="white"/><circle cx="50" cy="100" r="60" fill="black"/><circle cx="350" cy="100" r="60" fill="black"/></svg>');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
</style>
</head>
<body>
<div class='anvil'></div>
</body>
</html>В этом коде белый цвет в SVG-маске означает видимую область, а чёрный - прозрачную. Таким образом, круги становятся прозрачными, и через них виден фон. Для Safari 13 обязательно добавьте -webkit- префикс, так как полная поддержка mask-image появилась только в более поздних версиях.
Альтернативный метод с clip-path
Можно использовать clip-path с полигональными или круговыми формами, но в Safari 13 могут быть ограничения. clip-path: inset() и circle() работают, но для сложной фигуры потребуется комбинировать несколько путей, что не всегда удобно. Рекомендуем остановиться на mask-image как на самом надёжном варианте для вашей задачи.
Особенности поддержки Safari 13
Safari 13 (выпущен в 2019 году) поддерживает mask-image с префиксом -webkit-. Убедитесь, что в вашем CSS-коде дублируются свойства с префиксом и без него. Также проверьте, чтобы SVG-маска была корректно закодирована (используйте utf8 в data:image/svg+xml). Если фон - картинка, она будет видна через прозрачные области маски.
Практические советы по настройке
- Цвет фигуры: Вы можете менять
backgroundэлемента на любой цвет или градиент. Маска останется той же. - Размеры кругов: В SVG-маске меняйте радиус (
r) и координаты (cx,cy) кругов, чтобы подогнать форму под нужные пропорции. - Скругления прямоугольника: Атрибут
rxуrectзадаёт радиус скругления углов. Увеличьте его для более гладких краёв. - Адаптивность: Используйте процентные значения в SVG или медиа-запросы, чтобы фигура выглядела корректно на мобильных устройствах.
Заключение
Создать фигуру наковальня с прозрачными кругами в CSS вполне реально, даже с учётом поддержки Safari 13. Используйте mask-image с -webkit- префиксом и SVG-маску, чтобы добиться нужного эффекта. Этот метод гибок, прост в адаптации и не требует дополнительных JavaScript-библиотек. Экспериментируйте с параметрами маски, чтобы получить идеальную форму для вашего проекта.