CSS 边框底部

Question

I have a problem with a styling thing.

See preview:

The blue part is an div with an light gradient, the white part is an after with an white SVG. What I want is de red part there comes an image, this means that I need to remove the after with the white SVG. But is it possible to make an border like the white SVG so the white part is transparant?

Hope someone can help me out!

Ps. sorry for my bad English.

Current code:

    .border-bottom-white::after {
    content: '';
    background-image: url('img/bottom_border_white.svg');
    background-size: cover;
    background-position: bottom right;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    height: 85px;
    position: absolute;
    bottom: 0;
    right: 0;
}

#topheader {
    position: relative;
    display: block;
    width: 100%;
    background: rgb(20,44,176);
    background: linear-gradient(0deg, rgba(20,44,176,1) 0%, rgba(24,57,191,1) 100%);
        background-size: auto;
    background-image: url('img/header-bg.svg');
    background-position: bottom center;
    background-size: 100% auto;
    padding-top: 15px;
    padding-bottom: 45px;
    transition: min-height 0.5s ease-out;
    -webkit-transition: min-height 0.5s ease-out;
}

Answer 1

I have found the solution guys!

#topheader{
    position: relative;
    display: block;
    width: calc(100% + 24px);
    background: rgb(20, 44, 176);
    background: linear-gradient(0deg, rgba(20, 44, 176, 1) 0%, rgba(24, 57, 191, 1) 100%);
    background-size: auto;
    background-image: url('img/header-bg.svg');
    background-position: bottom center;
    background-size: 100% auto;
    padding-top: 45px;
    padding-bottom: 45px;
    transition: min-height 0.5s ease-out;
    -webkit-transition: min-height 0.5s ease-out;
    border-bottom-right-radius: 80px;
    transform: rotate(1deg);
    left: -20px;
    top: -30px;
}
#topheader>.container{
    transform: rotate(-1deg);
}