Незамысловатые и простые команды в CSS упрощают жизнь веб-дизайнерам. Меньше картинок — больше кода — легче сайт.
Под катом представлен один из вариантов изящного скругления углов. Примерно вот таким образом:

.block{
    height: 400px;
    width: 100%;
    position: relative;
    background: linear-gradient(to right, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
}
.block::after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: inherit;
    z-index: -1;
    bottom: 0;
    transform-origin: left bottom;
    transform: skewY(3deg);
}

На мой взгляд, закругленные углы смотрятся более симпатично, чем острые. Они смягчают дизайн и делают его более динамичным, современным. Но конечно, все зависит от концепции сайта и вкуса разработчика.

С помощью псевдо-элементов ::before и ::after, поворачиваем края элемента. В этом примере показано, как регулировать базовый край:

.block{
    height: 400px;
    width: 100%;
    position: relative;
    background: linear-gradient(to right, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
}
.block::after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: inherit;
    z-index: -1;
    bottom: 0;
    transform-origin: left bottom;
    transform: skewY(3deg);
}

Преобразователь определяет координаты элемента, который нужно преобразовать. В примере выше определено основание, которое помещает стартовые координаты на нижнюю левую сторону блока.

А с помощью Sass Mixin скругление можно сделать еще проще. Sass Mixin упрощает процесс, избавляет от лишних сложностей правил стиля. Такое смешивание быстро определяет сторону для уклонения: top-left, top-right, bottom-left или bottom-right.

@mixin angle-edge($pos-top:null, $angle-top:null, $pos-btm:null, $angle-btm:null){
    width: 100%;
    position: relative;
    background: linear-gradient(to right, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
    &::before,
    &::after{
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        background: inherit;
        z-index: -1;
        transition: ease all .5s;
    }
 
    @if $pos-top{
        &::before{
            @if $pos-top == 'topleft'{
                top: 0;
                transform-origin: right top;
                transform: skewY($angle-top);
            }
            @if $pos-top == 'topright' {
                top: 0;
                transform-origin: left top;
                transform: skewY(-$angle-top);
            } 
        }
    }
 
    @if $pos-btm{
        &::after{
            @if $pos-btm == 'bottomleft' {
                bottom: 0;
                transform-origin: right bottom;
                transform: skewY(-$angle-btm);
 
            } 
 
            @if $pos-btm == 'bottomright' {
                bottom: 0;
                transform-origin: left bottom;
                transform: skewY($angle-btm);
            } 
        }
    }
}

В смешивании есть четыре переменные. Первые две $pos-top и $angle-top, определяют главную стартовую координату и градус закругления. Остальные переменные определяют координату и градус для нижней стороны.

Если заполнены все четыре переменные, можно повернуть обе стороны – вершину и основание элемента.

Можно использовать Sass @include синтаксис, чтобы вставить смешивание к элементу. Например, добавить искаженный край на верхней левой стороне:

.block{
    @include angle-edge(topleft, 3deg);
}

Добавить искаженный край на нижней правой стороне:

.block{
    @include angle-edge(bottomright, 3deg);
}

Добавить искаженный край на верхней левой и нижней правой стороне:

.block{
    @include angle-edge(topleft, 3deg, bottomright, 3deg);
}

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

А каким способами пользуетесь вы?