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

Question

[Ucorp]

Вариант сверстать такую кнопку только средствами css?

Answer 1

[Ksider]

проще всего картинкой

Answer 2

[Ankhena]

Чистый CSS, множественный фон градиентами

https://jsfiddle.net/qwf3cor2/
<div>кнопка</div>

body {
  background: #C79B4B;
}
div {
  width: 200px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #FFF;
  background: 
  linear-gradient(-135deg, #C79B4B 0, #C79B4B 5px, #fff 6px, #fff 8px, transparent 9px, transparent 100%),
  linear-gradient(135deg, #C79B4B 0, #C79B4B 5px, #fff 6px, #fff 8px, transparent 9px, transparent 100%),
  linear-gradient(-45deg, #C79B4B 0, #C79B4B 5px, #fff 6px, #fff 8px, transparent 9px, transparent 100%),
  linear-gradient(45deg, #C79B4B 0, #C79B4B 5px, #fff 6px, #fff 8px, transparent 9px, transparent 100%),
  linear-gradient(to right,#fff 0, #fff 2px, transparent 3px, transparent calc(100% - 3px), #fff calc(100% - 2px), #fff 100%),
  linear-gradient(to bottom, #fff 0, #fff 2px, #f00 3px, #900 calc(100% - 3px), #fff calc(100% - 2px), #fff 100%);
  margin: 30px;
}

Размеры уголков и основной фоновый градиент сами подберите.

Альтернатива - картинка и border-image.

Comments

[Антон Мудренок]

можно еще скрафтить из 3 блоков, 2 из которых будут с before & after для уголков, но ваш вариант мне больше нравится)

[Ankhena]

Антон Мудренок: да, такой вариант первым пришел в голову, но сразу не понравился. Я бы стала тогда стала делать картинкой или svg

Answer 3

[Дмитрий Еремин]

Вот отсюда
Только шире его сделайте

#octagon {
	width: 100px;
	height: 100px;
	background: red;
	position: relative;
}

#octagon:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	border-bottom: 29px solid red;
	border-left: 29px solid #eee;
	border-right: 29px solid #eee;
	width: 42px;
	height: 0;
}

#octagon:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	border-top: 29px solid red;
	border-left: 29px solid #eee;
	border-right: 29px solid #eee;
	width: 42px;
	height: 0;
}

Comments

[Сергей delphinpro]

Ваш ответ абсолютно бесполезен. Автору нужна кнопка с рамкой и градиентом. Этим способом так не сделать.

[Дмитрий Еремин]

Сергей: надо же, что именно вы смогли правильно трактовать вопрос автора
я вот, глупый, решил, что все внимание сконцентрировано на 8-угольнике

[Сергей delphinpro]

Дмитрий Еремин: По-моему, автор однозначно выразился - "Как сверстать такую кнопку?" )

Answer 4

[GreatRash]

Средствами CSS никак.

Comments

[Ankhena]

я бы не стала так категорично

[GreatRash]

Ankhena W: Да, интересное решение. С ИЕ9 только проблемы.

[Ankhena]

GreatRash: ИЕ9 не нужны такие уголки. Раз они им пользуются, им все равно до уголков :)
Скормить им прямоугольник.

[GreatRash]

Ankhena W: Ой вот только не надо эту песню заводить: кому что нужно. Есть начальник, он сказал сделать так, чтоб везде одинаково, включая ИЕ7. Дальше не проблемы начальника. Я таких контор поменял туеву хучу и нигде к мнению верстальщика не прислушивались.

[Сергей delphinpro]

GreatRash: ну и нафиг такой начальник нужен? =)

[GreatRash]

Сергей: Он денег платит, прикинь!

[Сергей delphinpro]

GreatRash: Другие тоже платят, и не все такие упоротые.
Что же ты конторы менял?

[GreatRash]

Сергей: Уж точно не из-за того, что приходилось под ИЕ верстать.

[Ankhena]

GreatRash: древним браузерам - просто фон или древним же способом - картинкой.

Сейчас всем верстаю ие10+, за 9ый +10% к стоимости. И все, никому сразу не нужен 9ие :)
Если не дают любимыми флексиками верстать, пусть компенсируют.

[GreatRash]

Ankhena W: Просто вы сам себе начальник, не нужно всех мерить по себе.

[Ankhena]

GreatRash: бессмысленный спор, каждый сам выбирает себе начальника или заказчика.
Если автору нужен ИЕ9- то картинками или кучкой дополнительных элементиков, если раритеты не нужны, то я предложила вариант на чистеньком CSS.