چگونگی ایجاد لبه های زاویه دار با استفاده از 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);}

روش آسانتر با استفاده از Sass Mixin

@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);
            }
        }
    }
}

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

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

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