Как сверстать этот треугольник что бы был как на скрине?

Создаю через css с помощью after треугольник, но как сделать что бы не было видно нижнего розового фона, а подложить туда например через margin-bottom: -40px фото как на скрине

Код треугольника:

#fourth-page:before {
    content: '';
    position: absolute;
    bottom: -40px;
    left: calc(50% - 40px);
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 35px solid black;
}

Вот как выглядит:


Надо как то наложить нижний фон на верхний что ли, но что бы розовый фон под треугольником не было видно. Короче не знаю как реализовать...