Как обрезать кнопку, чтобы осталась граница?
Добрый день!
Может кто сталкивался с подобным. Мне нужно сделать кнопку с округленным border, при этом обрезанную в одном углу, и эти углы тоже округленные.
Я уже пробовал clip-path - но он обрезает элемент, во-первых резко, во-вторых вместе с border и box-shadow.
Так же пробовал с before и after поколдовать, но пока тоже безуспешно.
Заранее благодарю за ответ!
Дополнительно:
Нарисуйте в свг там тоже можно клик сделать и это обычный html тег и обрабатывается так же как и лбьой другой тег
Если честно, я бы лишний раз не шаманил и просто сделал бы рамочку с помощью before и background-image (экспортнуть рамочку в svg)
Вариант Mors Clamor с polygon в целом правильнее, но конкретно в случае border'a, насколько я помню, он просто обрежет рамку. В общем попробуйте сначала его вариант.
Если не получится, можете использовать мой вариант :)
Ответы:
смотрите в сторону CSS свойства polygon
- polygon не совсем подходит для этого, во-первых нужно плавное обрезаени, во-вторых, border и box-shadow так же обрезаются
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для обрезки кнопки и оставления только границы, вам нужно применить стили к кнопке с использованием CSS.
Вот пример кода, который покажет вам, как это сделать для кнопки с классом "btn":
<button class="btn" style="border: 2px solid black;background-color: transparent;color: black;padding: 5px 10px">Моя кнопка</button>
В этом примере мы установили толщину границы кнопки на 2 пикселя, цвет границы на черный, цвет фона кнопки на прозрачный и цвет текста на черный. Мы также установили отступ внутри кнопки по 5 пикселей сверху и снизу, и 10 пикселей слева и справа.
Вы можете настроить эти значения в соответствии с вашими потребностями.
Если у вас есть несколько кнопок на сайте, и вы хотите применить эти стили ко всем кнопкам, вы можете использовать внешний CSS файл или добавить стили в раздел вашего HTML документа.
Надеюсь, это поможет вам обрезать кнопку и оставить только границу! Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.