Как сделать кнопку со с резаными углами?

Question

[Kvazarmw]

Подскажите как сделать вот такую кнопку:


вот что у меня пока вышло:

.button {
    width: 200px;
    height: 40px;
    text-align: center;
    line-height: 14px !important;
    color: #fff !important;
    font-size: 16px;
    background: linear-gradient(#f35445, #c82c1d);
}
.button:before, .button:after {
    content: "";
    box-sizing: border-box;
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
}
.button:before {
    left: 100%;
    border-left: 20px solid #c82c1d;
    border-bottom: 40px solid transparent;
}
.button:after {
    right: 100%;
    border-right: 20px solid #f35445;
    border-top: 40px solid transparent;
}

Answer 1

[Андрей Федоров]

держите https://codepen.io/aliencash/pen/JypqZL

Answer 2

[Ivan Bogachev]

Иван Карпущенко верно говорит, можно использовать transform:skew, но вот по поводу использования псевдоэлемента для текста - очень спорная мысль, точнее сказать не универсальная. Или придется этот текст передавать через data-атрибут, что будет довольно странным решением. Гораздо практичнее просто в button добавить span с текстом - codepen.

Answer 3

[Иван Карпущенко]

Можно убрать before и after, а углы сделать с помощью transform: skew(10deg);
Только текст придётся наложить иначе, например, тем же псевдоэлементом

Comments

[Иван Карпущенко]

https://jsbin.com/vesuvaqide/edit?html,css,output
Пример

[dom1n1k]

А что ж без текста? "Случайно" забылось наверное :)

[Сергей Горячев]

https://jsfiddle.net/wq607kuq/
Не нашел как на JsBin сделать правку)

[Сергей Горячев]

dom1n1k: А чего там делать) Просто развернуть его обратно и все)

[dom1n1k]

Угу, с лишним спаном внутри. И будет потом фронт-программист материть дизайнера с верстальщиком, потому что с такой кнопкой нельзя обращаться как с обычной нативной кнопкой.

[cssfish]

dom1n1k: wtf? button чем не угодил?

[dom1n1k]

cssfish: не понимаю вопроса, мне button всем угодил.

Answer 4

[Роман Мисюра]

В зависимости от необходимой поддержки, можно использовать свойство clip-path
caniuse clip-path
Clip-path generator

Answer 5

[dom1n1k]

Автор, послушай старого бухгалтера: это делается двумя элементами before/after + одна картинка фоновая.
Да-да, не skew, не градиент и не clip-path, а старая добрая картинка.
Все перечисленные "модные" способы не дадут тебе каких-то весомых плюсов, в вот минусы - дадут.
Например, в виде необходимости добавлять лишние DOM-узлы, или ограниченной кроссбраузерности...

Comments

[Дмитрий Гаджиев]

а если таких картинок у него будет под сотню на странице? сколько будет весить страница?

[dom1n1k]

Если все кнопки одинаковые - картинка будет одна.
Если кнопки разные - по количеству их разновидностей, обычно их не более 3-4 штук.
Опционально картинка может быть засунута в css в виде base64.