Блог

У меня проблема со стилем.

Смотрите предварительный просмотр:

Синяя часть — это div со светлым градиентом, белая часть — after с белым SVG. Я хочу, чтобы в красной части появилось изображение, это означает, что мне нужно удалить after с помощью белого SVG. Но возможно ли создать границу, подобную белому SVG, чтобы белая часть была прозрачной?

Надеюсь, кто-нибудь сможет мне помочь!

Ps. извините за мой плохой английский.

Текущий код:

     .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;
}
 

Я нашел решение, ребята!

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