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

Question

[Александр Осадчий]

Может кому-то попадались подобные решения: в одной кнопке целый будет - скругление + срез + обводка + hover-эффект

Answer 1

[RAX7]

border-image

Comments

[Александр Осадчий]

Вы как всегда - на высоте, спасибо огромное!!

[RAX7]

Александр Осадчий, как всегда пожалуйста =)

[Александр Осадчий]

RAX7 а не знаете, можно ли уйти от сухих цифр, и использовать резиновую высоту блока?

То есть, мне эти стили не только для кнопок, но и для блоков с текстом понадобятся..

[historydev]

Александр Осадчий, и чем это отличается от картинки?) С таким-же успехом можно svg на фон поставить и не париться.

[RAX7]

Александр Осадчий, можно svg маской сделать, как здесь https://qna.habr.com/q/1149992 сделан большой скругленный прямоугольник

Answer 2

[historydev]

Есть такая штука как clip-path
click
Generator online

Comments

[Александр Осадчий]

Спасибо!

А с этим свойство реально делать обводку и закругления срезанных углов?

UPD: Обводку можно псевдоэлементом сделать, а вот скругления срезов пока не понятно(

[historydev]

Александр Осадчий, просто добавляете полигоны пока не получиться закруглённый или найдите подходящий редактор который обладает нужным функционалом

Answer 3

[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>