Как сверстать такие кнопки?

Может кому-то попадались подобные решения: в одной кнопке целый будет - скругление + срез + обводка + hover-эффект
6311c1356ada7507124002.png
  • Вопрос задан
  • 425 просмотров
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 2
@historydev
Информационный наркоман
Есть такая штука как clip-path
click
Generator online
Ответ написан
@cssfish
Плохое знание основ - причина больших бед
пока нет времени сделать пример.

но это можно сделать комбинацией clip-path (для угла) и border-radius (для скругления корректировочного). Это на самом блоке.

А основное скругление (на обертке) через svg фильтр filter: url(#round);

а сам фильтр в svg на страницу положить
<defs>
	<filter id="round">
		<feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"></feGaussianBlur>
		<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo"></feColorMatrix>
		<feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
	</filter>
</defs>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы