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

Добрый день,

прошу подсказать начинающему, как наименьшими усилиями, сделать такую кнопку не с круглыми углами а косыми? скрин - prntscr.com/6dcy3u
ЯКнопку изображением не подходит сделать, нужно методами css, нашел вот сервис который позволяет сделать но до конца не понимаю что надо сделать с кодом.
  • Вопрос задан
  • 2484 просмотра
Пригласить эксперта
Ответы на вопрос 4
isay777
@isay777
Джумлавод, делаю сайты на jbzoo
Я думаю с помощью shape https://coveloping.com/tools/css-shapes-generator
Ответ написан
Комментировать
@IceJOKER
Web/Android developer
Ответ написан
Комментировать
@sagnio Автор вопроса
сечас попробую, видел такие в гугле.
Ответ написан
Комментировать
vahe_2000
@vahe_2000
Возможно вы имейте виду это посмотрите в 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;
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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