Косые рамки у блока через css?

Question

[furcifer]

Нужно сделать такую кнопку. Фон у кнопки прозрачный. clip-path: polygon сьедает рамки.
Подскажите пожалуйста, как можно сделать такие углы у bordera?

Comments

[Роман Дубинин]

svg не прокатит?

[Павел]

возможно border-left-top-radius

Answer 1

[Ivan Bogachev]

Много-много градиентов - немного странный на первый взгляд способ, позволяющий нарисовать бордер любой формы:

Длинный кусок кода...

.button {
    display: inline-block;
    position: relative;
    margin: 2rem;
    padding: 0 2rem;
    line-height: 2rem;
    font-family: 'Montserrat', sans-serif;
    color: #FFF;
    background:
        linear-gradient(to right, #41D3BD, #791E94),
        linear-gradient(to bottom, #791E94, #FE9920),
        linear-gradient(-45deg, transparent, transparent 40%, #FE9920 45%, #FE9920 55%, transparent 60%, transparent),
        linear-gradient(to left, #FE9920, #FCFF4B),
        linear-gradient(to top, #FCFF4B, #41D3BD),
        linear-gradient(-45deg, transparent, transparent 40%, #41D3BD 45%, #41D3BD 55%, transparent 60%, transparent);
    background-repeat: no-repeat;
    background-position: top right, top right, bottom right, bottom left, bottom left, top left;
    background-size:
        calc(100% - 10px) 2px,
        2px calc(100% - 10px),
        10px 10px,
        calc(100% - 10px) 2px,
        2px calc(100% - 10px),
        10px 10px;

    &::before {
        content: '';
        display: inline-block;
        height: 100%;
        width: 100%;
        position: absolute;
        bottom: -4px;
        right: -4px;
        background:
            linear-gradient(to bottom, #791E94, #FE9920),
            linear-gradient(-45deg, transparent, transparent 45%, #FE9920 50%, #FE9920 55%, transparent 60%, transparent),
            linear-gradient(to left, #FE9920, #FCFF4B);
        background-repeat: no-repeat;
        background-position: top right, bottom right, bottom left;
        background-size:
            2px calc(100% - 12px),
            12px 12px,
            calc(100% - 12px) 2px;
    }
}

codepen

Comments

[furcifer]

жестокий способ, но действительно работает. Спасибо большое