Как сделать такую кнопку в css, чтобы были другие углы или другие формы?

Question

[Олег Бабяк]

Добрый день,

прошу подсказать начинающему, как наименьшими усилиями, сделать такую кнопку не с круглыми углами а косыми? скрин - prntscr.com/6dcy3u
ЯКнопку изображением не подходит сделать, нужно методами css, нашел вот сервис который позволяет сделать но до конца не понимаю что надо сделать с кодом.

Comments

[Олег Бабяк]

Вопрос все еще не решен. Максимум что получилось prntscr.com/6ddo9m, все бы еще подошло если бы не задний белый фон, незнаете как убрать ?

Answer 1

[Антон]

Я думаю с помощью shape https://coveloping.com/tools/css-shapes-generator

Answer 2

[IceJOKER]

https://css-tricks.com/examples/ShapesOfCSS/

Answer 3

[Олег Бабяк]

сечас попробую, видел такие в гугле.

Answer 4

[Ваге]

Возможно вы имейте виду это посмотрите в JSFIDDLE

HTML

<div>
    <p>text..</p>
</div>

<div>
    <p>text..</p>
</div>

<div>
    <p>text..</p>
</div>

CSS

div:nth-child(1) {
    background: rgb(122, 206, 122);
    height: 140px;
    transform: skew(-10deg) rotate(2deg);
    -webkit-transform: skew(-10deg) rotate(2deg);
    -moz-transform: skew(-10deg) rotate(2deg);
}

div:nth-child(1) p {
    transform: skew(10deg) rotate(-2deg);
    -webkit-transform: skew(10deg) rotate(-2deg);
    -moz-transform: skew(10deg) rotate(-2deg);
    padding: 3% 2%;
}

div:nth-child(2) {
    border-bottom: 180px solid rgb(233, 233, 65);
    border-left: 8px solid transparent;
    border-right: 14px solid transparent;
    height: 0;
    margin-top: 60px;
    transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
}

div:nth-child(2) p {
    transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    padding: 3.5% 3%;
}

div:nth-child(3) {
    border-top: 140px solid rgb(253, 74, 74);
    border-left: 23px solid transparent;
    border-right: 14px solid transparent;
    height: 0;
    margin-top: 20px;
    transform: rotate(2deg);
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
}

div:nth-child(3) p {
    transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    position: absolute;
    top: -140px;
    padding: 3% 3%;
}

div:nth-child(3):before {
    content: '';
    width: 124%;
    height: 80px;
    background: #fff;
    position: absolute;
    left: -20%;
    bottom: 120px;
    transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
}

Вместо <div></div> ставьте <button></button> или что то другое
Чтобы не сделать круглые углы как вы же сказали нужно использовать свойство border-radius:none;